Переменные окружения в NextJS

Адрес API неудобно зашивать в каждый файл: на тесте и в проде он разный, а иногда его меняют без правки компонентов. В NextJS такие значения хранят в файле .env.local в корне проекта.

Запрос из серверного компонента выполняется только на сервере. Поэтому достаточно обычной переменной без префикса NEXT_PUBLIC_ - она не попадет в код, который уходит в браузер.

Давайте зададим базовый адрес API в .env.local:

API_URL=https://jsonplaceholder.typicode.com

После изменения .env.local перезапустим сервер разработки, чтобы NextJS подхватил новые значения. В page.jsx прочитаем переменную через process.env и соберем полный адрес запроса:

export default async function Users() {
	let response = await fetch(`${process.env.API_URL}/users`);
	let users = await response.json();
	
	return (
		<ul>
			{users.map(user => (
				<li key={user.id}>{user.name}</li>
			))}
		</ul>
	);
}

Вынесите адрес API каталога фильмов в переменную API_URL и используйте ее в странице списка фильмов.

Добавьте вторую переменную с префиксом версии API, если ваш бэкенд отдает данные по пути /v2/..., и соберите итоговый URL из двух частей на сервере.