Как создать проект Next.js на CentOS Stream и Rocky Linux

Next.js — фреймворк для разработки веб-приложений на базе JavaScript и библиотеки React. Next.js расширяет возможности React, добавляя встроенные инструменты для маршрутизации, серверного рендеринга, генерации статических страниц и оптимизации производительности.

Одной из особенностей Next.js является поддержка Server-Side Rendering (SSR) и Static Site Generation (SSG). Благодаря этим механизмам страницы могут формироваться либо на сервере при каждом запросе пользователя, либо заранее генерироваться во время сборки проекта. Такой подход позволяет значительно ускорить загрузку веб-страниц, улучшить индексирование сайта поисковыми системами и снизить нагрузку на клиентское устройство.

Next.js предоставляет удобную систему файловой маршрутизации, при которой структура URL автоматически формируется на основе структуры файлов в каталоге проекта. Это избавляет от необходимости вручную настраивать маршруты приложения. Помимо этого, фреймворк включает встроенную поддержку API-маршрутов. Это позволяет создавать серверную логику непосредственно внутри проекта без необходимости настраивать отдельный backend-сервис.

В статье рассмотрим, как создать проект Next.js на виртуальном сервере под управлением CentOS Stream и Rocky Linux.

Как создать проект Next.js на CentOS Stream и Rocky Linux

В отличие от статических веб-страниц, проекты Next.js представляют собой полноценные серверные JavaScript-приложения, которые выполняют часть логики на стороне сервера. При этом платформа Node.js предоставляет проекту интерпретатор JavaScript, системные библиотеки и механизм работы с модулями. Данные инструменты используются как непосредственно Next.js, так и его зависимостями. Вместе с Node.js в системе устанавливается пакетный менеджер npm. Через него происходит загрузка и управление библиотеками, необходимыми для работы приложения.

Исходя из вышесказанного, перед запуском проекта на Next.js необходимо установить Node.js. При этом установка Node.js через репозиторий NodeSource обычно предпочтительнее стандартных репозиториев. Официальные репозитории и CentOS Stream, и Rocky Linux ориентированы на стабильность системы и поэтому часто содержат устаревшие версии пакетов. Установка Node.js через NodeSource подробно описана в соответствующем разделе статьи нашего справочника.

После установки Node.js перейдите в каталог /opt, в котором будет располагаться проект:

$ cd /opt

Для создания нового проекта выполните команду, где your-nextjs-app — его название:

$ sudo npx create-next-app@latest your-nextjs-app

При выполнении данной команды утилита npx временно загружает из реестра npm пакет create-next-app и запускает его без необходимости устанавливать этот инструмент в системе глобально. Далее запустится интерактивный мастер создания проекта, который задаст ряд вопросов. Во-первых, мастер спросит о необходимости использования TypeScript, ESLint, Tailwind CSS или структуры каталога src. Затем после выбора параметров мастер создаст каталог с именем проекта, сформирует базовую структуру проекта Next.js, создаст файл конфигурации package.json, добавит необходимые зависимости и загрузит их из репозитория npm.

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

$ cd your-nextjs-app/

Запуск проекта Next.js на CentOS Stream и Rocky Linux

По умолчанию веб-интерфейс проекта доступен на порту 3000. В связи с чем перед запуском приложения необходимо открыть данный порт в брандмауэре Firewalld. Для чего добавьте соответствующее разрешающее правило:

$ sudo firewall-cmd --permanent --add-port=3000/tcp

Чтобы добавленное правило начало действовать, перезапустите брандмауэр Firewalld:

$ sudo firewall-cmd --reload

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

$ sudo npm run dev

Данная команда запускает веб-сервер на порту 3000. Кроме того, во время её выполнения происходит компиляция проекта и отслеживание изменений в исходных файлах. При внесении изменения в код, сервер пересоберёт затронутые части приложения и обновит страницу без перезагрузки.

Чтобы остановить сервер разработки, используйте сочетание клавиш Ctrl C.

Для подготовки проекта в production-режиме выполните следующую команду:

$ sudo npm run build

Данная команда предназначена для сборки проекта. В ходе её выполнения происходит компиляция исходного кода, оптимизация JavaScript и CSS, подготовка серверного и клиентского бандлов. Также производится генерация статических страниц и маршрутов, если это предусмотрено конфигурацией.

Чтобы запустить уже собранное приложение в production-режиме, выполните:

$ sudo npm run start

В отличие от команды npm run dev, которая запускает проект в режиме разработки, в этом случае не происходит пересборка проекта или отслеживание изменений в файлах. При выполнении данной команды сервер использует ранее подготовленные данные из сборки и обслуживает пользовательские запросы. Такой режим обеспечивает более высокую производительность, стабильность и безопасность. Именно production-режим используется при размещении приложения на сервере.

Остановка работы приложения также совершается при нажатии Ctrl C.