環境変数とPreview/Productionの差分管理の基礎

環境変数とPreview/Productionの差分管理は、ウェブ開発における重要な概念です。開発者は、ローカル環境、プレビュー環境、プロダクション環境で異なる設定を管理する必要があります。この記事では、環境変数とPreview/Productionの差分管理の基礎について説明します。

環境変数の管理

環境変数は、開発環境、プレビュー環境、プロダクション環境で異なる設定を管理するために使用されます。たとえば、APIキー、データベース接続情報、ホスティングURLなどが環境変数として管理されます。

Next.jsでは、.envファイルを使用して環境変数を管理できます。.envファイルには、環境変数をキーと値のペアで定義します。たとえば、次のようになります。

# .env
API_KEY=xxxxxxxxxxxxxxxxxxxx
DATABASE_URL=https://example.com/database
HOSTING_URL=https://example.com

Next.jsでは、.envファイルを読み込んで環境変数を使用できます。たとえば、次のようになります。

// pages/_app.js
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  return (
    <div>
      <h1>APIキー：{process.env.API_KEY}</h1>
      <h1>データベースURL：{process.env.DATABASE_URL}</h1>
      <h1>ホスティングURL：{process.env.HOSTING_URL}</h1>
    </div>
  );
}

export default MyApp;

Preview/Productionの差分管理

Preview/Productionの差分管理は、プレビュー環境とプロダクション環境での設定の差分を管理するために使用されます。たとえば、プレビュー環境では、データベース接続情報が異なる場合があります。

Next.jsでは、next.config.jsファイルを使用してPreview/Productionの差分管理を設定できます。next.config.jsファイルには、プレビュー環境とプロダクション環境での設定を定義します。たとえば、次のようになります。

// next.config.js
module.exports = {
  // プレビュー環境
  preview: {
    env: {
      DATABASE_URL: 'https://preview.example.com/database',
    },
  },
  // プロダクション環境
  production: {
    env: {
      DATABASE_URL: 'https://production.example.com/database',
    },
  },
};

Next.jsでは、next.config.jsファイルを読み込んでプレビュー環境とプロダクション環境での設定を使用できます。たとえば、次のようになります。

// pages/_app.js
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  if (router.pathname === '/preview') {
    // プレビュー環境
    return (
      <div>
        <h1>データベースURL：{process.env.DATABASE_URL}</h1>
      </div>
    );
  } else {
    // プロダクション環境
    return (
      <div>
        <h1>データベースURL：{process.env.DATABASE_URL}</h1>
      </div>
    );
  }
}

export default MyApp;

まとめ

環境変数とPreview/Productionの差分管理は、ウェブ開発における重要な概念です。Next.jsでは、.envファイルとnext.config.jsファイルを使用して環境変数とPreview/Productionの差分管理を設定できます。この記事では、環境変数とPreview/Productionの差分管理の基礎について説明しました。詳しい手順はこちら → https://felixstudio0.gumroad.com/?utm_source=qiita&utm_medium=github_actions&utm_campaign=2026-q1&utm_content=qiita-footer