自動静的最適化

Next.js は、ブロックするデータ要件がないページは静的である（プリレンダリング可能である）と自動的に判断します。この判断は、ページに getServerSideProps と getInitialProps が存在しないことによって行われます。

この機能により、Next.js はサーバーレンダリングされるページと静的に生成されるページの両方を含むハイブリッドアプリケーションを生成できます。

知っておくと良いこと：静的に生成されたページは依然としてリアクティブです。Next.js は、完全なインタラクティビティを提供するために、クライアントサイドでアプリケーションをハイドレーションします。

この機能の主な利点の 1 つは、最適化されたページはサーバーサイドでの計算を必要とせず、複数の CDN ロケーションからエンドユーザーに即座にストリーミングできることです。これにより、ユーザーにとって超高速な読み込み体験が得られます。

仕組み

ページに getServerSideProps または getInitialProps が存在する場合、Next.js はページをリクエストごとにオンデマンドでレンダリングするように切り替えます（これはサーバーサイドレンダリングを意味します）。

上記以外の場合、Next.js はページを静的 HTML にプリレンダリングすることにより、ページを自動的に静的に最適化します。

プリレンダリング中、ルーターの query オブジェクトは空になります。これは、このフェーズで提供できる query 情報がないためです。ハイドレーション後、Next.js はアプリケーションの更新をトリガーして、query オブジェクトにルートパラメータを提供します。

ハイドレーション後にクエリが更新されて別のレンダリングがトリガーされるケースは次のとおりです。

ページが動的ルートである。
ページに URL のクエリ値がある。
リライトは next.config.js で設定されます。これは、解析して query で提供する必要がある可能性のあるパラメータを持つ場合があるためです。

クエリが完全に更新され、使用可能かどうかを区別するには、next/router の isReady フィールドを活用できます。

知っておくと良いこと：getStaticProps を使用するページに動的ルートで追加されたパラメータは、常に query オブジェクト内で利用可能です。

next build は、静的に最適化されたページに対して .html ファイルを生成します。たとえば、pages/about.js ページの出力は次のようになります。

.next/server/pages/about.html

そして、ページに getServerSideProps を追加すると、次のようになります。

.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 つの方法を示しています。