自動静的最適化
Next.jsは、ブロッキングデータ要件がない場合、ページが静的（プリレンダリング可能）であると自動的に判断します。この判断は、ページにgetServerSidePropsとgetInitialPropsがないことによって行われます。
この機能により、Next.jsはサーバーレンダリングされたページと静的に生成されたページの両方を含むハイブリッドアプリケーションを生成できます。
補足: 静的に生成されたページも反応的です。Next.jsはクライアント側でアプリケーションをハイドレーションし、完全なインタラクティブ性を提供します。
この機能の主な利点の1つは、最適化されたページがサーバー側の計算を必要とせず、複数のCDNロケーションからエンドユーザーに即座にストリーミングできることです。結果として、ユーザーに対して_非常に高速_な読み込み体験を提供します。
仕組み
ページにgetServerSidePropsまたはgetInitialPropsが存在する場合、Next.jsはページをオンデマンド、リクエストごとにレンダリングするよう切り替えます（サーバーサイドレンダリングを意味します）。
上記に該当しない場合、Next.jsはページを静的HTMLにプリレンダリングすることで、自動的にページを静的に最適化します。
プリレンダリング中、ルーターのqueryオブジェクトは空になります。これは、このフェーズではquery情報を提供できないためです。ハイドレーション後、Next.jsはアプリケーションを更新して、queryオブジェクトにルートパラメータを提供します。
ハイドレーション後にqueryが更新され、別のレンダリングがトリガーされるケースは以下の通りです：
クエリが完全に更新され、使用可能かどうかを判断するには、next/routerのisReadyフィールドを活用できます。
補足:
getStaticPropsを使用しているページに追加された動的ルートのパラメータは、常にqueryオブジェクト内で利用可能です。
next buildは、静的に最適化されたページに対して.htmlファイルを出力します。例えば、pages/about.jsページの結果は次のようになります：
.next/server/pages/about.htmlページにgetServerSidePropsを追加すると、次のようにJavaScriptになります：
.next/server/pages/about.js注意点
getInitialPropsを持つカスタムAppがある場合、静的生成のないページでこの最適化は無効になります。getInitialPropsを持つカスタムDocumentがある場合、ページがサーバーサイドレンダリングされると想定する前にctx.reqが定義されているかを確認してください。プリレンダリングされたページではctx.reqはundefinedになります。- ルーターの
isReadyフィールドがtrueになるまで、レンダリングツリーでnext/routerのasPath値を使用しないでください。静的に最適化されたページは、サーバーではなくクライアント上でのみasPathを認識するため、プロパティとして使用すると不一致エラーを引き起こす可能性があります。active-class-nameの例は、asPathをプロパティとして使用する1つの方法を示しています。