Как использовать переменные среды в Next.js

Next.js знают все, кто работал с React. Он облегчил развитие SPA за счет наличия нескольких маршрутов и помог в SEO благодаря своему методу рендеринга на стороне сервера.

Next.js предлагает множество функций, незаметно выполняя тяжёлую работу. Одна из таких функций – поддержка переменных среды.

Переменные среды – отличный способ хранить конфиденциальную информацию о вашем приложении. Ключи API и пароли базы данных – наиболее сохраняемые значения в качестве переменных среды, но вы можете хранить всё, что угодно.

Эти переменные доступны для всего приложения, и они никогда не отображаются в браузере и хранятся только на сервере. Потому-то они такие и особенные.

Переменные среды встроены в Next.js.

Чтобы использовать переменные среды в вашем проекте Next.js, создайте файл с именем .env.local в корневом каталоге вашего проекта. Мы можем хранить все конфиденциальные значения, относящиеся к нашему приложению, в этом файле.

Переменные внутри .env.local:

// inside '.env.local' file
NAME=test123

Здесь у нас есть переменная под названием “NAME”, значение которой равно “test123”. В примере ‘test123’ – это строка без одинарных или двойных кавычек.

Все переменные, которые мы создаём внутри этого файла, хранятся только в этом формате.

Доступ к переменным среды в Next.js возможен только внутри этой окружающей среды.

”Getstaticprops“ и ”getServerSideProps” – это два метода, которые предоставляются нам Next.js и которые дают нам доступ к среде Node.js, которая помогает извлечь данные и помогает в процессе рендеринга на стороне сервера.

Обе эти функции поддерживают модель process, которая является глобальным объектом. Внутри этих функций вы можете писать регулярный код Node.js. Поскольку эти функции поддерживают Node.js , вы можете использовать “process.env” для доступа к переменным среды.

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

Взгляните на приведённый ниже пример:

// pages/index.js (inside the pages directory, rendering "index.js")
export default function Home(props) {
return <h1>{props.secret}</h1>;
}
function getStaticProps() {
 return {
  props: {
   secret: props.env.NAME
  }
 }
}

Когда мы запрашиваем страницу “index.js ”, перед функциональным компонентом ”Home“ сначала будет запускаться ”getStaticProps“, который содержит реквизит под названием ”secret”, значение которого мы извлекаем из переменной среды, которую мы установили ранее.

После завершения этой функции мы получим доступ к реквизитам “secret” внутри нашего компонента “Дом”. Таким образом, наши секреты остаются в безопасности, и наше приложение работает так, как оно работало раньше.