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

برای استفاده از متغیرهای محیطی در برنامه خود، در ابتدا باید طبق مستندات تنظیم متغیرهای محیطی، متغیرهای محیطی را به برنامه خود، اضافه کنید. در نظر داشته باشید که نام تمامی متغیرهای محیطی برنامه‌تان باید با عبارت _NEXT_PUBLIC شروع شود تا در نهایت به درستی در برنامه بارگذاری شوند.

در ادامه، شما می‌توانید با استفاده از دستور .process.env به متغیرهای محیطی خود در برنامه NextJS، دسترسی داشته باشید؛ به عنوان مثال:

console.log(`app listening on ${process.env.NEXT_PUBLIC_LIARA_URL}`) 

در مثال فوق، NEXT_PUBLIC_LIARA_URL یک متغیر محیطی است که از قبل، به برنامه فرضی در لیارا، اضافه شده است.

در NextJS، متغیرهای محیطی که با _NEXT_PUBLIC شروع می‌شوند به صورت خودکار به کد سمت کلاینت منتقل می‌شوند و در مرورگر کاربر قابل دسترسی هستند. برای متغیرهایی که باید محرمانه بمانند و فقط در سرور استفاده شوند، نباید از پیشوند _NEXT_PUBLIC استفاده کنید.

شما می‌توانید برای بارگذاری متغیرهای محیطی محرمانه خود یک فایل به نام env.production. در مسیر اصلی پروژه خود ایجاد کنید و متغیرهای محیطی خود را در آنجا تعریف کرده و در پروژه خود استفاده کنید. پس از انجام این کارها، می‌توانید پروژه خود را در لیارا مستقر کنید.

برای اینکه به متغیرهای محیطی در زمان build پروژه، دسترسی داشته باشید؛ تفاوتی نمی‌کند که متغیرهای خود را با _NEXT_PUBLIC شروع کرده باشید یا از فایل env.production. استفاده کرده باشید؛ در هر صورت، کافیست تا آن را در فایل next.config.js، تنظیم کنید.

به عنوان مثال، فرض کنید که یک متغیر به نام BUILD_TIME_VAR را در فایل env.production. مانند قطعه کد زیر، تنظیم کرده‌اید:

BUILD_TIME_VAR=ThisIsBuildTime

برای استفاده از این متغیر در زمان build پروژه، بایستی مانند قطعه کد زیر، آن را به بخش env در فایل next.config.js، اضافه کنید:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    BUILD_TIME_VAR: process.env.BUILD_TIME_VAR,
  },
  };

export default nextConfig;

با انجام کار فوق، می‌توانید در زمان build پروژه، به متغیرمحیطی مدنظرتان دسترسی داشته باشید؛ به عنوان مثال، برای دسترسی به متغیر مثال فوق، کافیست تا قطعه کد زیر را در فایل next.config.js، قرار دهید:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    BUILD_TIME_VAR: process.env.BUILD_TIME_VAR,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    console.log('Building with environment variable:', process.env.BUILD_TIME_VAR);
    return config;
  },
  };

export default nextConfig;