Установка Next.js в ispmanager 6

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

Ключевые особенности Next.js

1. Серверный рендеринг (SSR). Позволяет рендерить страницы на сервере, что улучшает производительность и SEO.
2. Статическая генерация (SSG). Вы можете заранее генерировать страницы во время сборки приложения, что делает их быстрыми для загрузки.
3. Автоматическая маршрутизация. Next.js автоматически создает маршруты на основе структуры файлов в папке pages, что упрощает навигацию.
4. API маршруты. Вы можете создавать серверные API прямо в вашем приложении, используя специальные файлы в папке pages/api.
5. Поддержка CSS и Sass. Next.js поддерживает стилизацию с помощью CSS и Sass, а также CSS-модули.
6. Интеграция с различными инструментами. Next.js хорошо интегрируется с различными библиотеками и инструментами, такими как Redux, TypeScript и другими.
7.  Оптимизация изображений. Фреймворк предоставляет встроенные компоненты для оптимизации изображений.

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

Для чего это нужно

Установка фреймворка Next.js и начальное конфигурирование для корректной его работы в рамках панели.

Инструкции

Перед тем как приступить к установке фреймворка Next.js, необходимо установить Node.js через панель управления и настроить обработчик для сайта в соответствии с официальными инструкциями. Для работы с Next.js требуется версия Node.js 18.17 или выше. По умолчанию приложения Node.js используют порт, поэтому в поле “Способ подключения” выберите значение “Порт”.

После установки обработчика для сайта нужно установить необходимые пакеты для работы с фреймворком. Для этого откройте меню сайта (нажмите на кнопку с тремя точками), перейдите в раздел “Просмотр пакетов Node.js” и выберите “Установить”. В поле “Название пакетов Node.js” укажите через пробел следующие пакеты:

• next@latest
• react@latest
• react-dom@latest

После того, как панель закончит установку пакетов, требуется изменить конфигурационный файл обработчика Node.js, перейдя в раздел “Сайты” и, выбрав нужный сайт, нажать на кнопку “Конфиг. файлы”.

Для конфигурационного файла Node.js, необходимо добавить следующие строки в секцию “scripts”:

“build" : "next build"
"dev" : "next dev"
"lint" : "next lint"

Также потребуется изменить значение параметра start на next start. Пример отредактированной секции:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }, 

После внесения изменений в конфигурационный файл, необходимо создать директорию в корневом каталоге сайта, в котором будет работать приложение - по умолчанию это “app”. В зависимости от вашего проекта, приложение также может работать в директории “pages” (вместо “app”) и использовать директорию “public” для статичных файлов (изображения, шрифты и т.д.).

Если после изменения конфигурации, Node.js запускается с ошибкой, откройте shell-клиент под пользователем-владельцем сайта в меню сайта (кнопка с изображением трех точек) и введите команду npm run build.

После этого перезапустите Node.js на сайте нажав в меню сайта на кнопку “Перезапустить (Node.js)”.