ランタイム設定 | Next.js

警告:

この機能は非推奨です。 代わりに環境変数の使用を推奨します。環境変数もランタイム値の読み取りをサポートしています。

サーバー起動時にコードを実行するには、register関数を使用できます。

この機能は自動静的最適化、出力ファイルトレーシング、Reactサーバーコンポーネントとは互換性がありません。

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

next.config.js

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

サーバー専用のランタイム設定はserverRuntimeConfigの下に配置してください。

クライアントとサーバーサイドコードの両方からアクセス可能なものはpublicRuntimeConfigの下に配置します。

publicRuntimeConfigに依存するページでは、必ずgetInitialPropsまたはgetServerSidePropsを使用するか、カスタムAppに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="ロゴ"
        layout="fill"
      />
    </div>
  )
}

export default MyImage