Next.js の Hello World から Vercel へのデプロイまで

React のフレームワーク Next.js の Hello World から Vercel へのデプロイまでを試してみます。

基本的には 公式のチュートリアル を参考にしています。

やってみた

環境作成

create-next-app コマンドでプロジェクト作成します。

$ npx create-next-app@latest

...

✨  Done in 9.20s.
Initialized a git repository.
Success! Created next-sample at /PATH/next-sample

この場合、聞かれるのはプロジェクト名のみです。

※ オプションで --ts をつけると TypeScript を使ったプロジェクトになる。
※ ESLint のインストールエラーで Node.js を v14.13.0 → v14.17.0に変更した。

ローカルサーバー起動

ローカル環境の起動は

$ cd /PATH/next-sample
$ npm run dev

のみ。

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

と出たらブラウザで http://localhost:3000 にアクセスして表示が確認できます。

ファイルの確認

create-next-app のみ行って生成されるのは最小構成の模様。

特にコンポーネントに分かれているわけではなく、 pages/index.js にトップページの記述がまとめてあります。

ルートにある next.config.js が設定ファイルで色々なプラグインを追加したりするとのこと。

Vercelへのデプロイ

まずは GitHubリポジトリにプッシュ。

$ git remote add origin https://github.com/USERNAME/next-sample.git
$ git push -u origin main

次に Vercelのサイト でアカウント作成します。

アカウント作成してログイン後の画面、「Import Git Repository」から、先ほどプッシュしたGitHubリポジトリを選択します。

リポジトリ選択後、デプロイ設定画面に移ります。
今回はデフォルトで問題ないのですが、ビルドコマンドや出力ディレクトリ、環境変数の設定ができそうです。

最下部に表示される「DEPLOY」ボタンをクリックすると・・・

ビルドやデプロイの進捗状況が表示された後、デプロイ成功の画面が表示されました。
ダッシュボードの「DOMAINS」のURLにアクセスするとサーバーにデプロイされていました。

感想

  • Vue.js や Nuxt.js のCLIでのセットアップとあまり変わらずに立ち上げまではできました。
  • Vercel でのデプロイはGitHubで管理しているプロジェクトはチュートリアルの通りのため簡単でした。
  • ローカルのホットリロードやVercel上での画面表示が引くほど早かったです。
  • Zero Config を謳っているとおり、必要最低限のファイルや機能から始めれそうだなと思いました。

中身のほうはマークアップするのに困らないくらいはこれからポチポチいじってみたいなと思います。