Как загрузить статический сайт next.js на хостинг

Если вы разработали приложение на next.js, которому не требуется загружать дополнительные данные из базы данных или других источников на каждый запрос клиента, наиболее правильным решением будет сгенерировать статические html страницы и разместить их на хостинге, без покупки VPS и поднятия на нем nodejs, pm2/strongloop/forever, что несет за собой дополнительные расходы. Такой подход подойдет если ваше приложение — landing page/документация/сайт визитка.

Генерация статических страниц

Для генерации статических страниц вашего приложения, откройте терминал и перейдите в корневой каталог вашего приложения. Выполните команду:

next build && next export

После того как приложение будет сгенерировано, в корневом каталоге появится папка `/out`. Так как все страницы внутри приложения доступны по адресам вида: https://your-app.com/services, а сгенерированные файлы имеют расширение `*.html`, необходимо создать файл `.htaccess` в папке `/out`, который укажет веб-серверу Apache какие страницы отдавать пользователю.

Создайте файл с названием `.htaccess` в папке `/out` с содержимым:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

Теперь загрузите все файлы из папки `/out` в каталог `public_html` вашего хостинг-аккаунта.