ランタイム設定

一般的には、 環境変数 を使用して設定を行うのがいいでしょう。なぜなら、ランタイム設定はレンダリング / 初期化時の余計な処理につながり、また Automatic Static Optimization と互換性がないからです。

ランタイム設定を追加するためには、next.config.js に publicRuntimeConfig と serverRuntimeConfig を記述してください:

module.exports = {
  serverRuntimeConfig: {
    // サーバー側でのみ使えます
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET // 環境変数から渡す
  },
  publicRuntimeConfig: {
    // サーバー側、クライアント側の両方で使えます
    staticFolder: '/static'
  }
};

サーバー側だけで利用する値であれば、ランタイムの設定は serverRuntimeConfig に記述してください。

クライアント側とサーバー側のどちらのコードからも使う値であれば、 publicRuntimeConfig に記述してください。

publicRuntimeConfig に依存しているページは Automatic Static Optimization の対象から除外するために、 必ず 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;

関連事項