Next.js

概要

Next.js は React ベースのフロントエンドフレームワークです。
Next.js は React に加えて様々な機能を提供しますが、自分の場合は、主に SPA ではなく複数ページからなるサービスを React を用いて作る際に Next.js を使っています。
いわゆるルーティングが必要なケースですね。
React ではこういった場合には通常 React Router を用いて構築すると思いますが、個人的にはしっくりこなかったので、早々に Next.js の導入を考えました。

また、これも個人的な好みですが、Next.js をサーバサイドの機能として使うことは今のところ考えていないので、Next.js の持つ SSR (Server Side Rendering) や ISR (Incremental Static Regeneration) といった機能は使わないようにしています。
もっぱら、SSG (Server Side Generation) のみ使っているので、作成後にビルドすれば、その生成物を Web サーバに設置するだけでどこでも動かすことができます。

SSG に対応する前までは、Next.js は本番環境としてデプロイする適当な場所が思いつかなかったので導入を控えていましたが、SSG に対応したことで本格的に使える！と個人的には感じました。

初期設定

Next.js は Node.js がインストールされていることが前提なので、インストールされていないようであればまずは Node.js をインストールします。（参考：Node.js のインストール）

Node.js がインストールされていれば Next.js の初期設定は簡単です。
Next.js を使って開発したいと考えているディレクトリに移動し、下記のように実行することで直下にプロジェクトディレクトリが作成されます。
xxxxx はプロジェクト名です。
また、昨今の流れ的に TypeScript で書いておいた方が良いと思いますので、--typescript を付けています。

% npx create-next-app xxxxx --typescript

基本的にはこれだけでOK。
下記を実行することで、開発したアプリケーションが動作します。

npm run dev

デフォルトだと http://localhost:3000 でサービスにアクセス可能になります。

VSCode 拡張

自分の場合はエディタは VSCode を使っているので、Next.js での開発用に下記の拡張をインストールしました。
正確には、Next.js に対してではなく、JavaScript の開発用ですね。

ESLint dbaeumer.vscode-eslint
Prettier – Code formatter esbenp.prettier-vscode

ビルドとデプロイ

ビルドをして静的ファイルとして出力するには、package.json に以下のようにビルド用の設定を追加します。

  "scripts": {
...
    "build": "next build && next export -o output",
...
  }

上記設定後は、下記でビルドを実行できます。

% npm run build

上記設定だとビルド後に output/ 以下に静的ファイル群が出力されるので、これらを適当な Web サーバの配下に設置すればOKです。

ただし、いわゆるルーティング機能を使っている場合には一点注意が必要です。
例えば、Next.js では /xxx という path のファイルは xxx.html として出力されるので、いわゆるディレクトリ参照の際には拡張子 html のファイルをデフォルトで見に行くよう設定する必要があります。
Apache の場合には、例えば下記のような設定を行います。

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

git clone してくる場合

Next.js を使って開発したコードを Git 管理する場合、デフォルトでは Next.js 関連のファイルは Git 管理から除外されています。
これは、必要最低限のファイルのみ Git 管理すれば良いようになっているためです。
したがって、git clone 等でリポジトリから新規にコードを取得した場合、Next.js 関連のファイルが含まれていないので、そのままでは動作しません。
こういった時には、下記を実行して必要なファイルをインストールします。

% npm install

その他

Next.js には大量のサンプルが公開されています。
探すのが少々大変ですが、ここから使えるものを拾っていくと効率的に開発することができると思います。

next.js/examples at canary · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.