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

برای استفاده از متغیرهای محیطی در برنامه خود، در ابتدا باید طبق مستندات تنظیم متغیرهای محیطی، متغیرهای محیطی را به برنامه خود، اضافه کنید. در نظر داشته باشید که نام تمامی متغیرهای محیطی برنامه‌تان باید با عبارت _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 شروع کنید، می‌توانید در کدهای سمت فرانت‌اند نیز از آن‌ها استفاده کنید. اما اگر متغیرهای خود را بدون پیشوند اشاره شده، به متغیرهای محیطی لیارا در بخش تنظیمات، اضافه کنید، نمی‌توانید از آن در قسمت فرانت برنامه خود، بهره ببرید.

به عنوان مثال، فرض کنید که یک متغیر به نام BUILD_TIME_VAR را در بخش متغیرهای محیطی برنامه خود، مانند زیر، تنظیم کرده‌اید:

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;