Next.js × Vercelで.envを安全に管理する方法

Next.js × Vercelで.envを安全に管理する方法 開発

Supabase・OpenAI API Key設定まで

Webアプリ開発では、APIキーやデータベースの接続情報などの「機密情報」を安全に管理することが欠かせません。
GitHubにソースコードを公開する場合、これらを誤って含めてしまうと重大なセキュリティリスクになります。

そこで活躍するのが、.env ファイル＋Vercelの環境変数設定機能です。
この記事では、Next.jsアプリを例に、Vercelで.envを安全に運用する具体的な手順とコード例を紹介します。

基本の考え方

Next.jsアプリを開発・公開する際、APIキーやパスワードなどの「機密情報」をどのように管理するかは非常に重要です。
ここでは、ローカル開発から本番デプロイ（Vercel）までの基本的な流れを整理します。

  • ローカル開発環境では：
    .env ファイルを使ってパスワード・APIキーなどを管理し、process.env.**** で参照します。
  • GitHubにpushする際は：
    .gitignore で .env を除外し、誤って公開リポジトリに含めないようにします。
  • Vercelなどの公開環境（本番）では：
    .env ファイル自体はアップロードしません。
    代わりに、Vercelの「環境変数設定画面」から値を登録し、
    本番サーバー上で自動的に process.env として読み込まれる仕組みになっています。

この流れを理解しておくことで、セキュリティを確保しながら、ローカルと本番で同一コードを安全に動かすことができます。

Supabase・OpenAI API Key設定まで実例で解説

.env ファイルの基本構成

まず、ローカル開発環境で .env.local ファイルを作成します。
ここに、SupabaseやOpenAIなどのAPIキー・URLを記述します。

# .env.local
SUPABASE_URL=https://xxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR...
OPENAI_API_KEY=sk-xxxxxx
NEXT_PUBLIC_API_BASE_URL=https://api.example.com

🔸 .gitignore に .env* を必ず追加しておきます。

# .gitignore
.env
.env.local
.env.production

これで、GitHubへ機密情報がアップロードされることを防げます。

Next.jsで環境変数を参照する方法

Next.jsでは process.env.変数名 で環境変数を参照します。
例えば、サーバーサイドでSupabaseクライアントを初期化する場合は以下のように書きます。

// lib/supabaseClient.ts
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.SUPABASE_URL!;
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

OpenAIのAPIキーを使う場合も同様です。

// lib/openai.ts
import OpenAI from "openai";

export const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

クライアントサイドで使う場合の注意点

ブラウザ（フロントエンド）で環境変数を使いたい場合は、
変数名の先頭に NEXT_PUBLIC_ を付ける必要があります。

NEXT_PUBLIC_API_BASE_URL=https://api.example.com

Next.jsでは、NEXT_PUBLIC_ が付いた変数だけがビルド時にJSコードへ埋め込まれ、
ブラウザからアクセスできるようになります。

// src/app/page.tsx
export default function Home() {
  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  return <p>API Base URL: {baseUrl}</p>;
}

⚠️ 注意：
NEXT_PUBLIC_ を付けた変数は公開されるため、秘密情報は絶対に入れないようにしましょう。

Vercelで環境変数を設定する

本番環境では .env ファイルをアップロードする代わりに、
Vercelの環境変数設定画面で登録します。

設定手順

  1. Vercelのダッシュボードにアクセス。
    対象プロジェクトを選択。
  2. メニューから
    Settings → Environment Variables を開く。
  3. 以下のように環境変数を追加します。
    SUPABASE_URL = https://xxxx.supabase.co
    SUPABASE_ANON_KEY = eyJhbGciOiJIUzI1NiIsInR...
    OPENAI_API_KEY = sk-xxxxxx
    NEXT_PUBLIC_API_BASE_URL = https://api.example.com
  4. 環境を選択：
    • Production（本番用）
    • Preview（プレビュー環境）
    • Development（開発環境）
  5. 「Add」ボタンで保存。

これで、Vercelの内部環境変数として登録され、
本番環境で process.env.**** が自動的に参照できるようになります。

実際の動作例：Next.js API Routes

SupabaseとOpenAIのAPIキーを使うNext.js APIルートの例です👇

// pages/api/analyze.ts
import type { NextApiRequest, NextApiResponse } from "next";
import { openai } from "@/lib/openai";
import { supabase } from "@/lib/supabaseClient";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { text } = req.body;

  // OpenAIでテキストを要約
  const aiResponse = await openai.responses.create({
    model: "gpt-4o-mini",
    input: `以下の文章を要約してください: ${text}`,
  });

  const summary = aiResponse.output[0].content[0].text;

  // Supabaseに保存
  await supabase.from("summaries").insert([{ text, summary }]);

  res.status(200).json({ summary });
}

Vercel上にデプロイしても、
APIキーはGitHubに含まれず、安全に利用されます。

まとめ

環境設定方法ファイルアップロード備考
ローカル開発.env.local❌ .gitignoreで除外process.envで参照可能
GitHubなし❌.envはアップしない
Vercel本番環境「Environment Variables」で登録✅（内部管理）自動的に注入される
クライアント側NEXT_PUBLIC_ 接頭辞付き✅（公開可）機密情報は含めない

最後に

  • .env ファイルは開発専用。本番ではVercelの環境変数機能で管理。
  • NEXT_PUBLIC_ 接頭辞付き変数はクライアントでも使用可能。
  • SupabaseやOpenAIなどのAPIキーも、この仕組みで安全に運用できる。

セキュアで拡張性の高いNext.jsアプリ開発を進めるために、
この環境変数運用の流れをぜひマスターしておきましょう。

タイトルとURLをコピーしました