目次
はじめに
こんにちは。食べログ ウェブ開発部 FEチームの原田です。
昨年リリースした食べログノートではNext.jsを利用しており、Static Exportsを採用しています。 今回は食べログノートでStatic Exportsを採用した経緯や採用するための注意点、実際に運用してみての感想をお伝えします。
食べログノートの詳細については以下の記事も是非ご覧ください。
https://note.com/tabelog_frontend/n/na9a2ce24a4d5
Static Exportsとは
Static Exportsとは、Next.jsのウェブアプリケーションを静的コンテンツとしてエクスポートできる機能です。 Next.jsのウェブアプリケーションを配信する際は通常Node.jsサーバーが必要になりますが、 Static Exportsの場合は静的コンテンツの配信サーバーさえあればNode.jsサーバーは不要となります。
Static Exportsを利用するにはnext.config.jsで以下の設定を追加します。
const nextConfig = {
output: 'export',
}
詳しくは以下もご覧ください。
https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
Static Exportsを採用した経緯
食べログノートはこちらの記事でも紹介している通り、 レストラン向けのクラウド台帳サービスです。
そのためSEO対策のためにSSRなどを行う必要がなく、 Node.jsサーバーの運用を不要にできる点がStatic Exportsを採用する大きな決め手となりました。
また導入前にはStatic Exportsで制限されるNext.jsの機能について調査しましたが、 プロダクトの要件や開発体験に大きな影響を及ぼす点が特になかったことも導入を決めた理由の1つとなっています。
Static Exportsを利用する際の注意点
Static Exportsで制限される機能について調査したとお伝えしましたが、 1点だけ工夫した点があったため注意点としてご紹介します。
Dynamic Routingが使えない
Node.jsサーバーを利用してNext.jsを配信する場合は、こちらのドキュメントにしたがって、 動的なルーティングを実現できます。
しかしStatic Exportsでは静的なHTMLファイルをビルド時に生成するために
必要なid(slug)をgenerateStaticParamsでビルド時に指定する必要があります。
（※Pages Routerの場合はgetStaticPathsを利用する。）
そのためビルド後に生成されたidなどが付与されたURLは404 Not Foundとなってしまい、実質的な動的ルーティングは実現できません。
食べログノートでは予約詳細など動的なルーティングを実現する必要があったため、対策が必要になりました。
例：/bookings/[id] ← idが動的に変わる。
対策
静的コンテンツ配信サーバの前段にリクエストを振り分けるようなnginxサーバーを設置し、 動的なパラメータを含むリクエストでも意図したHTMLが返るように対応しました。 （動的なパラメータを取得してからの処理はクライアントで行っています。）
運用してみての感想
これまで紹介した通り、食べログノートではリリース当初から今までStatic Exportsを利用して開発しています。 Node.jsサーバーを運用せずにNext.jsを利用できるのはStatic Exportsを利用する大きなメリットだと感じています。 Next.jsはもともとSSR向けのフレームワークだったこともあり、 ホスティングには（Vercelの利用などを除けば）基本的にNode.jsサーバーを用意することが多いと思います。 Static Exportsを利用することでNode.jsサーバーを用意することなく、 S3やGCSでもNext.jsで開発したアプリケーションの配信が可能になります。
Dynamic Routingが使えない問題に関しては、今回のように前段にリクエストを制御するサーバーを設置したり、 ホスティングするサービスにrewritesルールを設定することで対応できます。
まとめ
SEO対策が不要でSSRなどが不要の要件であれば、 Static Exportsを利用することでNode.jsサーバーを運用せずに手軽にNext.jsでの開発ができます。 Next.jsはRouterやビルドツール群が組み込まれており、 Node.jsサーバーを運用せずに手軽にそれらの恩恵を受けたい場合にもStatic Exportsは有効な選択肢になります。
最後に
食べログでは一緒に働いてくださる方を募集中です。
気になった方は以下のリンクを是非チェックしてみてください！
