ランタイム設定

警告：

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

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を必ず使用するか、getInitialPropsを持つカスタムAppを使用して自動静的最適化からオプトアウトする必要があります。サーバーサイドでレンダリングされない限り、ランタイム設定はどのページ（またはページ内のコンポーネント）でも利用できません。

アプリでランタイム設定にアクセスするには、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