CodeZine(コードジン)

特集ページ一覧

VercelにNext.jsアプリケーションをデプロイする~Vercel上でNext.jsを動かす利点も紹介

Vercel+Next.jsを活用したWebアプリケーション開発入門 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。本記事では、Vercelが開発したフレームワーク「Next.js」アプリケーションをVercel上にデプロイする方法や、両者を組み合わせることのメリットをご紹介します。

目次

はじめに

 前回はVercelとは何かをご紹介しました。本記事より、もう一歩踏み込んで、Next.jsで簡単なブログを表示するアプリを作成し、Vercel上での動かし方を解説します。

 この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。

 自身でサンプルコードを動かす時間が無い方向けにも一読するだけで理解ができるように配慮しましたので、ぜひ最後まで読んでいただければと思います。

環境準備

 OSは問いません。Node.jsとVisual Studio Codeを利用しますので、それぞれインストールをします。

Node.jsのインストール

 公式サイトより16.15.1LTS(執筆時点)をダウンロードしてインストールしてください。

Visual Studio Codeのインストール

 公式サイトより1.67.2(執筆時点)をダウンロードしてインストールしてください。

ひな形の作成

 今回より、Next.js公式サイトのチュートリアルで作成するアプリをひな形として、そちらをベースにステップバイステップで処理を加えていきます。早速ひな形を以下コマンドで作成しましょう。任意のディレクトリでコマンドプロンプトやターミナル上で実行します(改行はせず1行で入力してください)。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

 コマンドを実行すると「Ok to proceed?」と確認される場合がありますが 「y」を入力してEnterをすると進みます。以下が実行結果のサンプルです。

 nextjs-blogにディレクトリを移動し、「npm run dev」を実行しますとサーバーが立ち上がり、ブラウザで確認できます。

 動作確認が完了しましたら、こちらのひな形に手を加えて確認していきます。

Vercelにデプロイ

 先ほど動作確認したアプリはGitリポジトリになっていますので、そのままGitHubにプッシュします。

 Vercelを開いてGitHubのリポジトリ「nextjs-blog」を「Import」します。

 特に設定はせず「Deploy」をクリック。

 わずか2クリックでデプロイされてブラウザで確認できるようになりました。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Vercel+Next.jsを活用したWebアプリケーション開発入門

著者プロフィール

  • 山本 誠樹(サイトコア株式会社)(ヤマモト マサキ)

     サイトコア株式会社 セールスグループ パートナーテクニカルイネーブルメントマネージャー。通信系システムや会員管理サービスの設計・開発から保守まで、システムエンジニアとして様々なプロジェクトに約20年従事。近年はクラウドにフォーカスしたコンサルティングを小売・流通・電力系など業種を問わず行う。201...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5