# Запуск Next.js приложения на Джино.Хостинге

Общепринятым стандартом разработки сайтов и веб-приложений считается работа над проектом на локальной машине с последующим развёртыванием проекта на сервере. Рассмотрим процесс развёртывания стартового проекта на Next.js. Представленная инструкция предназначена для веб-разработчиков.

# Подготовка к запуску проекта

Для запуска приложения вам понадобится подключённая услуга «Поддержка веб-приложений»

.
После её подключения в разделе УправлениеНастройки веб-сервера контрольной панели выберите для нужного вам домена необходимую версию Node.js.

Примечание

Версию Node.js следует выбрать ту, которая применялась в процессе разработки.

Подключитесь к хостинг-контейнеру через SSH или используйте web-консоль для выполнения команд — оба способа равнозначны. Чтобы открыть веб-консоль, пройдите в панель управления на хостинге в раздел УправлениеКонсоль. Перейдите в каталог домена на хостинге. Для этого используйте команду:

cd domains/example.ru

Где example.ru замените на название вашего домена. После выполнения этого шага появится следующее сообщение:

direnv: loading ~/domains/example.ru/.envrc
direnv: export +CPATH +LD_LIBRARY_PATH +LIBRARY_PATH +PKG_CONFIG_PATH ~MANPATH ~PATH

Это сообщение свидетельствует о создании окружения с выбранной для домена версией Node.js. Подготовка завершена. Переходим к следующему шагу.

# Создание проекта

Локально на вашем устройстве инициализируйте проект командой: npx create-next-app@latest my-app.

Затем соберите проект с помощью команды: npm run build

Для проверки работы веб-приложения используйте команду: npm run start.

В терминале вы увидите следующее:

> my-app@0.1.0 start
> next start

  ▲ Next.js 14.2.1
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 372ms

Перейдите по URL http://localhost:3000/, чтобы увидеть стартовый проект на Next.js.

# Деплой проекта на хостинг

Создайте файл app.js в каталоге проекта my-app с содержимым:

const path = require('path');
const nextPath = path.join(__dirname, 'node_modules', '.bin', 'next');
process.argv.length = 1;
process.argv.push(nextPath, 'start');
process.env.NODE_ENV = 'production';
require(nextPath);

Запакуйте в архив каталог .next, public, а также файлы package.json, package-lock.json и app.js.
Загрузите полученный архив на хостинг в папку с названием вашего домена. Вы можете сделать это любым удобным для вас способом, например, через FTP-доступ (opens new window).
Распакуйте архив на хостинге и переместите содержимое архива в корень каталога домена.
Для установки зависимостей проекта выполните команду: npm install --production --no-save.
Проверьте работу приложения на хостинге. Для этого пройдите по URL вашего домена в веб-браузере.

# Incomplete response received from application

Если запуск приложения производился локально в режиме разработки с использованием команды npm run dev, то при развёртывании подобного приложения на хостинге вы можете столкнуться с сообщением «Incomplete response received from application».

Запуск приложения в режиме разработки приводит к изменениям в сборке проекта, что может привести к подобным проблемам.

Решение: удалите каталог .next в корневом каталоге проекта, а затем выполните повторную сборку с помощью команды npm run build. Результат сборки из каталога .next следует загрузить на хостинг.