サーバーを使わないNextjs開発(App Router) #React

はじめに

NextjsをデプロイするにはNodeサーバーが必要と思われがちですが、Static Exportsを使用することで静的なファイルだけを用いたデプロイを行えます。
この記事ではそんなStatic Exportsの利用方法について紹介します。

Static Exports

Staci Exportsはその機能を有効にして、ビルドを実行するとアプリケーションをSPAとして活用するための最適なファイルを生成します。
生成されるコンテンツはファイルの分割や、画像の最適化などNextjsを利用することによる様々恩恵をひきつづk受けられます。

有効にするためにはnext.config.jsでoutputを'export'に設定します。

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}
 
module.exports = nextConfig

Static Exportsはクライアントコンポーネントはもちろん、サーバーコンポーネントにも対応しています。
クライアントコンポーネントはビルドによってプレレンダリングされたHTMLとそれにインタラクティブ性を付与するJavaScriptを生成します。サーバーコンポーネントはビルド時に計算されたHTMLが生成されます。
Static Exprotsはそれらのコンポーネントに関わる生成物に加えて、最初のHTMLを返した後のナビゲーションに関わるコンテンツを生成します。

環境を作成する

まず、npx create-next-appでNextjsの環境を作成します。質問には以下のように答えました。

そして、next.config.jsの設定を以下のようにします。

static-exports/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

その後npm run buildを実行するとoutに対して静的なファイルが吐き出されます。
ホストするサーバーにはこの中身を返すように設定することでWebページを展開できます。

利用できない機能

Nodeサーバー上での動作を前提としているものや、ビルド時に計算できない動的なロジックは対応していません。
前者に対応する機能は直感的でわかりやすいですが、後者については注意が必要です。例えば動的なルーティングはgenerateStaticParams()を用いなければ利用できません。

対応していない機能

Dynamic Routes with dynamicParams: true
Dynamic Routes without generateStaticParams()
Route Handlers that rely on Request
Cookies
Rewrites
Redirects
Headers
Middleware
Incremental Static Regeneration
Image Optimization with the default loader
Draft Mode

おわりに

この記事ではNextjsのStatic Exportsについて紹介しました。
Reactの開発ではフレームワークを利用することが推奨されていますが、推奨される多くのフレームワークはデフォルトでNodeサーバー上に載せることを想定して作成されています。
そのため、Nodeサーバーを利用せずに静的コンテンツをサーバー上にホストしたい場合はフレームワークを用いずにViteなどを用いてReactの環境を用いることがあります。そんな場合でもNextjsのStatic Exportsを用いることでバンドルファイルの効率的な分割や画像の最適化などの恩恵を受けつつ静的なコンテンツを配布する環境を作れるので候補に入れてみてはいかがでしょうか。