fullstack.org.ua

Змінні середовища · fullstack.org.ua

Початковий10 хв· Fullstack Team

Змінні середовища

Розділіть публічні та серверні змінні середовища й безпечно використовуйте їх у Next.js.

Що таке змінні середовища

Змінні середовища — це значення конфігурації, які застосунок отримує з оточення, у якому він запускається. Наприклад:

URL зовнішнього API;
назва режиму роботи застосунку;
ключ доступу до бази даних;
секрет для підписування токенів.

У Next.js змінні середовища зберігають у файлах із назвою .env.

Змінні середовища не замінюють систему керування секретами для production, але допомагають не зберігати конфіденційні значення безпосередньо в коді.

Файли змінних середовища

Найчастіше використовують файл .env.local:

text

# .env.local
DATABASE_URL=postgresql://localhost:5432/shop
INTERNAL_API_KEY=local-secret-key
NEXT_PUBLIC_API_URL=https://api.example.com

javascript

export default function HomePage() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  const hasInternalKey = Boolean(process.env.INTERNAL_API_KEY);

  return (
    <main>
      <h1>Налаштування застосунку</h1>

      <p>Публічна адреса API: {apiUrl}</p>
      <p>
        Серверний ключ налаштовано: {hasInternalKey ? "так" : "ні"}
      </p>
    </main>
  );
}

javascript

import ApiStatus from "./components/api-status";

export default function HomePage() {
  return (
    <main>
      <h1>Мій застосунок</h1>
      <ApiStatus />
    </main>
  );
}

javascript

"use client";

export default function ApiStatus() {
  // Так робити не можна: секрет не призначений для браузера
  const secret = process.env.INTERNAL_API_KEY;

  return <p>{secret}</p>;
}

javascript

import { NextResponse } from "next/server";

export async function GET() {
  const apiKey = process.env.INTERNAL_API_KEY;

  if (!apiKey) {
    return NextResponse.json(
      { error: "Серверний ключ не налаштовано" },
      { status: 500 }
    );
  }

  const response = await fetch("https://api.example.com/products", {
    headers: {
      Authorization: `Bearer ${apiKey}`,
    },
  });

  if (!response.ok) {
    return NextResponse.json(
      { error: "Не вдалося отримати товари" },
      { status: response.status }
    );
  }

  const products = await response.json();

  return NextResponse.json(products);
}

javascript

const requiredEnvironmentVariables = [
  "INTERNAL_API_KEY",
  "NEXT_PUBLIC_API_URL",
];

for (const variableName of requiredEnvironmentVariables) {
  if (!process.env[variableName]) {
    throw new Error(`Відсутня змінна середовища: ${variableName}`);
  }
}

export const env = {
  internalApiKey: process.env.INTERNAL_API_KEY,
  publicApiUrl: process.env.NEXT_PUBLIC_API_URL,
};

javascript

import { env } from "@/lib/env";

export async function getProducts() {
  const response = await fetch(`${env.publicApiUrl}/products`, {
    headers: {
      Authorization: `Bearer ${env.internalApiKey}`,
    },
  });

  if (!response.ok) {
    throw new Error("Не вдалося отримати товари");
  }

  return response.json();
}