︙

Runtime Config

Warning:

この機能は廃止予定です。 代わりにenvironment variablesを使用することをお勧めします。これはまた、 runtime 値の読み取りをサポートすることもできます。

You can run code on server startup using the register function.

この機能はAutomatic Static Optimization、Output File Tracing、またはReact Server Componentsとは機能しません。

あなたの app に runtime 設定を追加するには、next.config.jsを開いて、publicRuntimeConfigとserverRuntimeConfigの設定を追加します：

next.config.js

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}

任意の server 専用の runtime config を serverRuntimeConfig の下に置いてください。

client と server-side code の双方からアクセス可能なものは、すべて publicRuntimeConfig の下にあるべきです。

publicRuntimeConfigに依存するページは、getInitialPropsまたはgetServerSidePropsを必ず使用するか、またはあなたのアプリケーションはカスタム AppをgetInitialPropsを使って自動静的最適化からオプトアウトする必要があります。Runtime 設定は、server-side レンダリングされていないページ(またはページ内の component)には利用できません。

next/configを使用して、あなたの app で runtime 設定にアクセスするには、次のようにします。：

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

// Only holds serverRuntimeConfig and publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
// Will only be available on the server-side
console.log(serverRuntimeConfig.mySecret);
// Will be available on both server-side and client-side
console.log(publicRuntimeConfig.staticFolder);

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

export default MyImage;