【Next.js和訳】API Ref/next.config.js/Runtime Configuration

この記事について

この記事は、next.config.js/Runtime Configurationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Runtime Configuration

一般的には、ビルド時の環境変数を使って設定を行うことになります。その理由は、ランタイム構成はレンダリングや初期化のオーバーヘッドを増やし、自動静的最適化との互換性がないからです。

ランタイム構成をアプリに追加するには、next.config.jsを開き、publicRuntimeConfigとserverRuntimeConfigの設定を追加します。

module.exports = {
  serverRuntimeConfig: {
    // サーバーサイドでのみ利用可能
    mySecret: "secret",
    secondSecret: process.env.SECOND_SECRET, // 環境変数のパス
  },
  publicRuntimeConfig: {
    // サーバーとクライアントの両方で利用可能になる
    staticFolder: "/static",
  },
}

サーバーのみのランタイム設定は、serverRuntimeConfigの下に置きます。

クライアント側とサーバー側のコードの両方からアクセスできるものは、publicRuntimeConfigの下に置く必要があります。

publicRuntimeConfigに依存するページは、getInitialPropsを使用して自動静的最適化をオプトアウトする必要があります。getInitialPropsを使用しないページ（またはページ内のコンポーネント）では、ランタイム設定は利用できません。

アプリ内のランタイム設定にアクセスするには、次のようにnext/configを使用します。

import getConfig from "next/config"
import Image from "next/image"

// serverRuntimeConfigとpublicRuntimeConfigのみを保持します。
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// サーバーサイドでのみ利用可能になる
console.log(serverRuntimeConfig.mySecret)
// サーバーサイドとクライアントサイドの両方で利用できるようになります。
console.log(publicRuntimeConfig.staticFolder)

function MyImage() {
  return (
    <div>
      <Image src={`${publicRuntimeConfig.staticFolder}/logo.png`} alt="logo" layout="fill" />
    </div>
  )
}

export default MyImage

関連

https://nextjs.org/docs/api-reference/next.config.js/introduction

https://nextjs.org/docs/api-reference/next.config.js/environment-variables