Создание и запуск проекта Next.js в ServBay

Обзор

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

Что такое Next.js?

Next.js — это популярный open-source фреймворк на базе React, поддерживающий различные методы рендеринга, такие как серверный рендеринг (SSR) и статическую генерацию сайтов (SSG). Эти возможности улучшают производительность приложений, пользовательский опыт и SEO-оптимизацию. Next.js включает встроенные файловые маршруты, API-роутинг, разбиение кода, поддержку CSS Modules и многое другое, обеспечивая разработчикам единое место для продуктивной работы.

Ключевые особенности и преимущества Next.js

• Поддержка разных стратегий рендеринга: SSR, SSG, CSR и гибридные методы — вы можете выбрать наиболее подходящий вариант под ваши задачи.
• Файловая маршрутизация: Маршруты автоматически создаются на основе структуры каталогов pages или app, что просто и наглядно.
• API-роутинг: Позволяет создавать собственные API-эндпоинты прямо внутри Next.js проекта — удобно для fullstack-разработки.
• Автоматическое разбиение кода: Загрузка только необходимого JS для текущей страницы, что ускоряет отображение.
• Оптимизация изображений (next/image): Автоматически подбирает размер, формат и стратегию загрузки картинок для повышения производительности.
• Встроенная поддержка CSS и Sass: Легко управлять стилями внутри проекта.
• Fast Refresh (быстрое обновление): Почти мгновенная обратная связь при изменениях кода во время разработки.

С помощью Next.js разработчики могут создавать современные, масштабируемые и удобные в поддержке web-проекты максимально эффективно.

Запуск проекта Next.js в ServBay

ServBay предоставляет интегрированную среду локальной веб-разработки с поддержкой Node.js и других языков и инструментов. Благодаря Node.js-окружению и функционалу управления сайтами (включая обратное проксирование и работу со статическими файлами) вы сможете с легкостью создавать, запускать и деплоить проекты Next.js.

В этом руководстве мы рассмотрим создание Next.js проекта, запуск его в режиме разработки (через обратный прокси) и деплой статической версии с помощью статической файловой службы ServBay.

Предварительные требования

Перед началом убедитесь, что:

1. Установили ServBay на macOS.
2. В разделе Пакеты ServBay установили и включили нужную версию Node.js. Если Node.js еще не установлен, обратитесь к документу Использование Node.js в ServBay.

Пошаговая инструкция

1. Создание проекта Next.js

Для начала инициализируем новый проект Next.js.

1. Откройте терминал и перейдите в корневую папку сайтов ServBay:

   cd /Applications/ServBay/www

2. Инициализация проекта через create-next-app: Выполните команду, чтобы создать новый проект Next.js. Рекомендуем назвать его servbay-next-app (папка с этим именем будет создана внутри /Applications/ServBay/www).

   npx create-next-app@latest servbay-next-app

   npx позволяет запускать пакеты Node.js без их предварительной установки, а create-next-app@latest использует самую свежую версию мастера Next.js. Следуйте подсказкам в терминале для выбора опций (TypeScript, ESLint, Tailwind CSS, App Router и т.д.).

3. Перейдите в папку проекта и установите зависимости:

   cd servbay-next-app
   npm install

   Команда npm install установит все необходимые зависимости, указанные в package.json.

2. Изменение главной страницы (необязательно)

Чтобы убедиться, что проект работает, отредактируем главную страницу.

1. Откройте файл pages/index.js (если выбран Pages Router) или app/page.js (при использовании App Router). В этом руководстве рассматривается Pages Router:

   # Откройте файл с помощью любимого редактора, например VS Code
   code pages/index.js

2. Измените содержимое файла, чтобы страница выводила "Hello ServBay!":

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>This page is running via ServBay.</p>
       </div>
     );
   }

   Если вы используете App Router (app/page.js), структура может отличаться, но заменять содержимое <h1> нужно аналогично.

3. Режим разработки

Во время разработки удобно использовать dev-сервер Next.js с поддержкой горячей перезагрузки (HMR) и Fast Refresh. Возможности обратного проксирования ServBay идеально подходят для подключения локального домена к dev-серверу.

1. Запустите dev-сервер Next.js: Выполните из корневой папки проекта (/Applications/ServBay/www/servbay-next-app):

   npm run dev -- -p 8585

   Эта команда запустит сервер Next.js на локальном порту 8585. Вы можете выбрать другой свободный порт, если нужно.

2. Настройка сайта ServBay (обратный прокси): Откройте приложение ServBay, перейдите в раздел Сайты и добавьте новый сайт со следующими параметрами:

   • Имя: My first Next.js dev site (или любое другое название)
   • Домен: servbay-next-dev.servbay.demo (для тестов рекомендуем использовать суффикс .servbay.demo)
   • Тип сайта: Обратный прокси (Reverse Proxy)
   • Proxy IP: 127.0.0.1 (локальный адрес)
   • Proxy Port: 8585 (порт dev-сервера Next.js)

   Сохраните и примените изменения. ServBay автоматически настроит Caddy или Nginx (в зависимости от ваших настроек) для перенаправления запросов к servbay-next-dev.servbay.demo на 127.0.0.1:8585.

   Подробная инструкция: Добавление Node.js сайта для разработки в ServBay.

3. Откройте тестовый сайт: В браузере перейдите по адресу https://servbay-next-dev.servbay.demo.

   ServBay автоматически выпускает и настраивает SSL-сертификат (через собственный ServBay User CA) для всех локальных доменов, поэтому вы сможете безопасно работать с сайтом в HTTPS-режиме без предупреждений браузера. Для локальной разработки удобно использовать пользовательские домены и бесплатные SSL-сертификаты.

4. Подготовка к производству и деплой статического сайта

После завершения разработки Next.js-проекта часто требуется собрать оптимизированный продакшн-билд. Если ваш проект использует статический экспорт (output: 'export' или next export), ServBay отлично подходит для его размещения в режиме статического сайта.

1. Соберите продакшн-версию Next.js и экспортируйте статику: Выполните из корня проекта:

   npm run build
   npm run export

   • npm run build компилирует проект и создает оптимизированный билд (выход — папка .next).
   • npm run export (работает при соответствующей конфигурации Next.js или в старых версиях) или настройка output: 'export' создаёт полностью статичные HTML, CSS и JS-файлы, помещая их в директорию out.

2. Настройка сайта ServBay (статический сервис): В разделе Сайты ServBay добавьте новый сайт со следующими параметрами:

   • Имя: My first Next.js production site (или другое)
   • Домен: servbay-next-prod.servbay.demo (рекомендуется использовать .servbay.demo)
   • Тип: Статический (Static)
   • Корневая папка: полный путь к папке со статикой, например /Applications/ServBay/www/servbay-next-app/out

   Сохраните и примените. ServBay настроит веб-сервер для обслуживания файлов из каталога /Applications/ServBay/www/servbay-next-app/out.

3. Проверьте продакшн-сайт: Откройте в браузере адрес https://servbay-next-prod.servbay.demo — вы увидите статическую версию сайта, собранную Next.js.

   Благодаря поддержке пользовательских доменов и SSL, ваш продакшн-сайт также доступен по HTTPS в локальной среде.

Итоги

Выполнив эти шаги, вы создали Next.js-проект в локальной среде ServBay, научились запускать его в режиме разработки через обратное проксирование и организовали деплой статической версии с помощью файловой службы ServBay. Интегрированная среда и удобное управление сайтами в ServBay заметно упрощают локальную разработку и тестирование Next.js-проектов.