استفاده از متغیرهای محیطی در Next.js – بارگذاری امن، دسترسی در مرورگر و مدیریت در زمان اجرا

Next.js به‌صورت داخلی از متغیرهای محیطی پشتیبانی می‌کند. این مقاله نحوهٔ بارگذاری از فایل‌های .env، دسترسی امن در مرورگر با NEXT_PUBLIC_، استفاده در زمان اجرا، بارگذاری در تست‌ها، و ترتیب اولویت فایل‌های محیطی را بررسی می‌کند.

Environment variablesNEXT_PUBLICRuntime access.env test

~2 دقیقه مطالعه · آخرین به‌روزرسانی ۵ آبان ۱۴۰۴

بارگذاری متغیرهای محیطی


Next.js به‌صورت خودکار متغیرهای محیطی را از فایل‌های .env* بارگذاری کرده و در process.env قرار می‌دهد. مثال:

# .env
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

متغیرها در محیط Node.js قابل استفاده هستند، مانند در Route Handlerها:

export async function GET() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
}

پشتیبانی از متغیرهای چندخطی


می‌توانید متغیرهایی مانند کلیدهای خصوصی را با line break یا \n تعریف کنید:

PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nKh9NV...\n-----END DSA PRIVATE KEY-----"

بارگذاری خارج از محیط Next.js با @next/env


برای بارگذاری متغیرها در فایل‌هایی خارج از runtime، از پکیج @next/env استفاده کنید:

import { loadEnvConfig } from '@next/env'

const projectDir = process.cwd()
loadEnvConfig(projectDir)

ارجاع به متغیرهای دیگر


می‌توانید از $ برای ارجاع به متغیر دیگر استفاده کنید:

# .env
TWITTER_USER=nextjs
TWITTER_URL=https://x.com/$TWITTER_USER

برای استفاده از $ در مقدار واقعی، از \$ استفاده کنید.


دسترسی در مرورگر با NEXT_PUBLIC_


برای در دسترس بودن متغیر در مرورگر، باید با NEXT_PUBLIC_ شروع شود:

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

در زمان build، مقدار در فایل‌های جاوااسکریپت inlined می‌شود:

setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

توجه: ارجاع‌های پویا مانند process.env[varName] inlined نمی‌شوند.


متغیرهای زمان اجرا


در رندرینگ پویا، می‌توانید متغیرها را در زمان اجرا بخوانید:

export default async function Component() {
  await connection()
  const value = process.env.MY_VALUE
}

این روش برای استفاده از یک Docker image در چند محیط مناسب است.


متغیرهای محیطی در تست


برای محیط تست، از فایل .env.test استفاده کنید. فایل .env.local در تست بارگذاری نمی‌شود تا نتایج تست یکسان باقی بمانند.

برای بارگذاری مشابه Next.js در تست‌ها:

import { loadEnvConfig } from '@next/env'

export default async () => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

ترتیب بارگذاری متغیرها


متغیرها به ترتیب زیر بررسی می‌شوند:

  1. process.env
  2. .env.$(NODE_ENV).local
  3. .env.local (در تست بارگذاری نمی‌شود)
  4. .env.$(NODE_ENV)
  5. .env

مثلاً اگر NODE_ENV برابر با development باشد، مقدار موجود در .env.development.local اولویت دارد.


نکات مهم


  • فایل‌های .env* باید در ریشه پروژه باشند، نه در پوشه

نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

ادامه

مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

ادامه

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

ادامه

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

ادامه

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

ادامه

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

ادامه