Итак, вы создаете приложение своей мечты с помощью Next. js, который вы всегда хотели создать. Позвольте мне быть честным, изучение next.js — одно из лучших решений, которое вы приняли! Итак, давайте поймем проблему и решим ее.

Next.js, несомненно, является одним из самых универсальных и надежных полнофункциональных фреймворков React.js из когда-либо созданных. Его популярность взлетела до небес. Одной из его уникальных особенностей является то, что он привносит в картину концепцию серверных компонентов. У нас может быть два типа компонентов в приложении next.js: компоненты на стороне сервера и компоненты на стороне клиента. Это ключ к решению этой проблемы.

Вы могли бы воспользоваться учебным пособием Next.js на YouTube или кодом GitHub, в котором используются переменные среды. Но по какой-то причине он говорит, что переменная среды не определена. Но почему?

Для версий Next.js до 9.4:

Переменные .env в основном доступны на стороне сервера в случае Next.js. Чтобы получить доступ к этой переменной .env на стороне клиента, нам нужно объявить переменные .env в next.config.js.

Давайте посмотрим, как сделать то же самое:

module.exports = {
  reactStrictMode: true,
  env: {
    API_KEY: process.env.BASE_URL,
  }
}

Здесь BASE_URL — это переменная .env, которую вы объявили в файле .env. И вы получите конкретный файл в файле next.config.js.

Затем вы можете получить доступ к переменной API_KEY из клиентского кода, используя process.env.API_KEY.

Важно отметить, что поле env в файле next.config.js используется только для определения переменных среды для клиентского кода. Если вы хотите получить доступ к переменным среды из кода на стороне сервера, вам нужно будет использовать другой метод, например, установить их в системной среде или использовать файл конфигурации.

Кроме того, имейте в виду, что значения переменных среды, определенные в файле next.config.js, будут встроены в пакет на стороне клиента во время сборки, поэтому они будут видны всем, кто проверяет ваш код. Таким образом, вы должны быть осторожны с тем, какие переменные вы решите определить таким образом, и использовать его только для тех переменных, которые безопасны для клиента.

Для Next.js 9.4 и выше:

В Next.js 9.4 и выше вы можете использовать префикс NEXT_PUBLIC_ в файле .env, чтобы сделать переменные среды доступными для браузера. Эти переменные будут заменены их фактическими значениями во время сборки, поэтому к ним можно будет получить доступ из кода на стороне клиента, как если бы они были жестко запрограммированы. Например, вы можете использовать process.env.NEXT_PUBLIC_API_KEY для доступа к переменной среды с именем API_KEY, которую вы установили.

Имейте в виду, что при использовании этого метода переменные среды будут доступны клиенту, поэтому вам следует быть осторожным с тем, какие переменные вы решите сделать доступными таким образом. Вы должны использовать этот метод только для переменных, доступ к которым из клиента является безопасным, таких как общедоступные ключи API.

Если вы используете более раннюю версию Next.js или не хотите раскрывать свои переменные среды клиенту, вы все равно можете использовать обычный объект process.env для доступа к вашим переменным в коде на стороне сервера.

Вот и конец истории. Надеюсь, вы поняли концепцию. Удачного кодирования!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу