Запуск сайта на фреймворке Next.js

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

1. Создание сайта

При создании нового сайта укажите его имя и в конфигурации выберите “Node.js” + нужный тип базы данных:

Затем перейдите в настройки созданного сайта и установите необходимую версию Node.js.

Загрузите файлы приложения, подключившись по SFTP.

Примечание. Файлы сайта должны размещаться в каталоге sitename.ru/app.

2. Установка зависимостей

Подключитесь к серверу хостинга по SSH (инструкция) и перейдите в каталог с приложением, где размещается файл package.json:

cd ~/sitename.ru/app

Выполните команду

npm install

Она установит необходимые пакеты для работы.

3. Сборка приложения

На услуге Хостинг не поддержиается сборка frontend части сайта через turbopack. Чтобы приложение корректно собралось, в файле package.json замените строку next build на next build --webpack.

Для сборки приложения выполните команду

npm run build

4. Настройка приложение

Настройте работу Вашего приложения, учитывая особенности услуги Хостинг.

Для этого откройте файл package.json в консоли.

nano package.json

Найдите строку

"start": "next start"

и замените её на

"start": "next start -p APP_PORT -H APP_IP"

Вместо переменных APP_PORT и APP_IP пропишите их значения. Значения можно посмотреть на странице сайта, в разделе “Node.js”

Далее перейдите на один уровень вверх, для этого выполните команду

cd ..

Удалите папку www и настройте вместо неё символическую ссылку, чтобы ваш сайт увидел статические файлы. Для этого выполните следующие команды по порядку.

rm -r www

ln -s ./app/public  www

5. Завершение установки

Откройте снова раздел “Node.js” на странице сайта в личном кабинете.

Отредактируйте переменную PATH, добавив к ней путь

:/home/cXXXX/sitename.ru/app/node_modules/.bin/

вместо cXXXX укажите ваш контейнер. Он написан в начале переменной PATH.

В переменной APP_PATH удалите запись hello.js.

В результате должны получится следующие настройки

Перезапустите процесс Node.js, для этого нажмите сверху на кнопку “Перезапустить Node.js”

Если А-записи в настройках DNS уже вступили в силу, то сайт уже должен быть доступен с хостинга. Так же не забудьте подключить SSL-сертификат безопасности.