Как запустить несколько Next.js приложений на разных портах

Быстрый ответ

Чтобы указать собственный порт в приложении Next.js, воспользуйтесь переменной окружения PORT. Внесите соответствующие изменения в раздел scripts файла package.json:

"scripts": {
  "start": "PORT=3001 next start"
}

Альтернативно, вы можете создать файл .env.local в корневом каталоге проекта и указать там:

PORT=3001

С помощью переменных окружения вы сможете переопределить настройки по умолчанию и запустить приложение на выбранном вами порту.

Установка порта через командную строку

Для того чтобы изменить порт незамедлительно, без изменения конфигурационных файлов, добавьте ключ -p в командную строку.

В файле package.json укажите свой порт как для режима разработки, так и для продакшена:

"scripts": {
  "dev": "next dev -p 3001",
  "start": "next start -p 3001"
}

Такой подход особенно удобен для быстрого переключения портов и проведения тестирования.

Проверка занятости порта

Перед тем, как указать порт, убедитесь, что он не занят, выполнив команду:

lsof -i tcp:<ваш порт>

Если команда вернула какой-либо результат, это означает, что порт занят. В таком случае выберите другой порт или закройте процесс, который его использует.

Визуализация

Можно представить процесс настройки порта как выбор места для парковки автомобиля, где приложение Next.js это автомобиль (🚗), а порт — это место для парковки (🅿️).

     Автомобиль (🚗): Ваше приложение Next.js
 Парковочное место (🅿️): Порт для приложения

Процесс перехода на другой порт можно сравнить со сменой места на парковке:

Занятое место: 3000 (🅿️ 🚗 🚗 🚗 🚗)
Свободное место: 8080 (🅿️)

Чтобы "перепарковать автомобиль":

// Открываете `package.json` вашего проекта
"scripts": {
  "dev": "next dev -p 8080" // 🚗 ставите на порту 8080
}

Не забывайте: порт — это место для вашего приложения на "парковке".

Настройка менеджера пакетов

В случае использования Yarn или NPM как менеджеров пакетов, нужно немного изменить команды:

// Для Yarn
"scripts": {
  "dev": "yarn dev -p 3001"
}

// Для NPM
"scripts": {
  "dev": "npm run dev -- -p 3001"
}

Управление конфликтами портов

Если порт находится в использовании, действующий процесс можно завершить через диспетчер задач в Windows:

Диспетчер задач -> Процессы -> [Процесс Node.js] -> Завершить задачу

В Unix-системах остановка процесса выполняется командой:

kill $(lsof -t -i:<ваш порт>)

Указание собственного имени хоста

Для удалённого тестирования, можно указать собственное имя хоста с помощью ключа -H в команде запуска:

"scripts": {
  "dev": "next dev -H <ваше имя хоста> -p <ваш порт>"
}

Вместо <ваше имя хоста> подставьте имя хоста вашей локальной сети.

Полезные материалы

1. Настройка: Пользовательский сервер | Next.js — Руководство по настройке пользовательского сервера, включая установку портов.
2. Опции next.config.js: env | Next.js — Сведения о переменных окружения и их использовании при задании порта.
3. Развертывание Next.js с помощью Vercel — Инструкции по настройке и развертыванию приложений Next.js с учетом портов.
4. Создание приложения Next.js | Обучение Next.js — Основы создания приложений на Next.js, включая настройку портов.
5. Развертывание вашего приложения | Next.js — Углубленное исследование процесса развертывания приложений Next.js и настройки портов.