Создай сайт на nextjs с файлом .env в котором указан PORT под 80 и апи доступ NEXT_PUBLIC_BACKEND_URL=»http://localhost:3000/api»

disel

Создание сайта на Next.js с использованием .env файла

Вот пошаговая инструкция для создания сайта на Next.js с настройкой .env файла, где указан порт 80 и API-доступ через переменную NEXT_PUBLIC_BACKEND_URL.

1. Установка Next.js

Сначала создайте новый проект Next.js. Для этого выполните следующую команду в терминале:

bash

1
npx create-next-app my-next-app

Перейдите в созданную папку:

bash

1
cd my-next-app

2. Создание .env файла

Создайте файл .env в корне проекта и добавьте в него следующие строки:

javascript

1
2
PORT=80
NEXT_PUBLIC_BACKEND_URL="http://localhost:3000/api"

Примечание: Переменные, начинающиеся с NEXT_PUBLIC_, автоматически становятся доступными на стороне клиента в Next.js.

3. Настройка порта

По умолчанию Next.js запускается на порту 3000. Чтобы изменить порт на 80, можно использовать переменную окружения PORT. Для этого добавьте в package.json следующую команду в секцию scripts:

json

1
2
3
4
5
"scripts": {
  "dev": "PORT=80 next dev",
  "build": "next build",
  "start": "next start"
}

Теперь команда npm run dev будет запускать сервер на порту 80.

4. Создание API-эндпоинта

Создайте папку pages/api (если её ещё нет) и добавьте файл hello.js:

javascript

1
2
3
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' });
}

Этот эндпоинт будет доступен по адресу http://localhost:3000/api/hello.

5. Использование переменной NEXT_PUBLIC_BACKEND_URL

Теперь вы можете использовать переменную NEXT_PUBLIC_BACKEND_URL в вашем приложении. Например, создадим компонент, который делает запрос к API:

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useEffect, useState } from 'react';
 
export default function Home() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/hello`)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);
 
  return (
    <div>
      <h1>Next.js App</h1>
      <p>API Response: {data ? data.message : 'Loading...'}</p>
    </div>
  );
}

6. Запуск приложения

Запустите приложение с помощью команды:

bash

1
npm run dev

Теперь приложение будет доступно по адресу http://localhost (порт 80).

7. Дополнительные настройки

Если порт 80 недоступен (например, из-за ограничений прав доступа), вы можете использовать sudo для запуска:

bash

1
sudo npm run dev

Теперь у вас есть базовый сайт на Next.js с настройкой .env файла и API-доступом! 🎉

Похожие записи/страницы: