Next.jsでpublicRuntimeConfigを使用する方法

1. 環境変数の設定: まず、Next.jsプロジェクトのルートディレクトリにある「.env.local」ファイルを作成します。このファイルに、環境ごとの設定情報を記述します。例えば、以下のような内容です。

MY_API_KEY=abcdef123456
API_BASE_URL=https://api.example.com

2. 設定の読み込み: Next.jsの設定ファイルである「next.config.js」を編集し、publicRuntimeConfigオブジェクトを定義します。このオブジェクトには、環境変数の値を設定します。例えば、以下のようになります。

// next.config.js
module.exports = {
  publicRuntimeConfig: {
    MY_API_KEY: process.env.MY_API_KEY,
    API_BASE_URL: process.env.API_BASE_URL,
  },
};

3. 設定の利用: Next.jsのページやコンポーネントで、publicRuntimeConfigオブジェクトの値を利用することができます。例えば、以下のようになります。

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
const MyComponent = () => {
  return (
    <div>
      <p>APIキー: {publicRuntimeConfig.MY_API_KEY}</p>
      <p>APIベースURL: {publicRuntimeConfig.API_BASE_URL}</p>
    </div>
  );
};
export default MyComponent;

以上の手順に従うことで、Next.jsプロジェクトでpublicRuntimeConfigを使用して環境変数や設定情報を管理することができます。これにより、環境ごとに異なる設定を行いつつ、シンプルで効率的な開発が可能となります。