Створення та запуск проєкту 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 для інтегрованої розробки фронтенду та бекенду.
• Автоматичний поділ коду: Завантажується лише JS, що потрібен поточній сторінці, що позитивно впливає на швидкість.
• Оптимізований компонент для зображень (next/image): Автоматичне підлаштування розміру, формату й стратегії лоадінгу з метою підвищення продуктивності.
• Вбудована підтримка CSS та Sass: Спрощене керування та написання стилів.
• Fast Refresh: Практично миттєвий фідбек на зміни в коді під час розробки.

Використовуючи Next.js, ви можете швидко створювати високопродуктивні, масштабовані й легкі у підтримці сучасні веб-додатки.

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

ServBay — це інтегроване локальне веб-середовище розробки, що містить Node.js та інші мови й інструменти. Використовуючи Node.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 Router змініть файл app/page.js. Наприклад, для 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 легко налаштувати локальний домен для проксі на порт дев-сервера.

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

   npm run dev -- -p 8585

   Це запустить дев-сервер Next.js на локальному порту 8585. Ви можете обрати будь-який інший вільний порт.

2. Налаштуйте сайт у ServBay (зворотний проксі): Відкрийте додаток ServBay, зайдіть у розділ Сайти й додайте новий сайт зі такими параметрами:

   • Назва (Name): My first Next.js dev site (або будь-яка інша)
   • Домен (Domain): servbay-next-dev.servbay.demo (рекомендуємо домен із суфіксом .servbay.demo для локального тестування)
   • Тип сайту (Website Type): Reverse Proxy (Зворотний проксі)
   • Proxy IP: 127.0.0.1 (localhost)
   • Proxy Port: 8585 (порт дев-сервера 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. ServBay підтримує кастомні домени з безкоштовним SSL — це дуже зручно для локальної розробки.

4. Збірка продакшн-версії та деплой статичного сайту

Коли розробка проєкту завершена й потрібно розгорнути продакшн-версію, для статичних Next.js-проєктів (конфігурація output: 'export' або команда next export) ідеально підходить статичний файловий сервер ServBay.

1. Зберіть Next.js та експортуйте статичні файли: У каталозі проєкту (/Applications/ServBay/www/servbay-next-app) виконайте:

   npm run build
   npm run export

   • npm run build компілює проєкт і створює оптимізований білд у папці .next.
   • npm run export (або конфігурація output: 'export') експортує застосунок у повністю статичний HTML/CSS/JS у папку out.

2. Налаштуйте сайт у ServBay (статичний сервер): У меню Сайти додайте сайт з наступними параметрами:

   • Назва (Name): My first Next.js production site (або як хочете)
   • Домен (Domain): servbay-next-prod.servbay.demo (рекомендуємо .servbay.demo)
   • Тип сайту (Website Type): Static (Статичний)
   • Корінь сайту (Website Root): вкажіть повний шлях до експортованої папки out, тобто /Applications/ServBay/www/servbay-next-app/out.

   Збережіть і застосуйте зміни. Web-сервер ServBay подаватиме файли напряму зі складу out.

3. Зайдіть на продакшн-сайт: Відкрийте браузер та перейдіть на https://servbay-next-prod.servbay.demo. Ви побачите статичний сайт, який згенерував Next.js.

   Як і для сайтів у режимі розробки, завдяки кастомним доменам та автоматичній SSL-конфігурації, продакшн-сайт буде доступний через HTTPS навіть локально.

Підсумок

Після проходження всіх кроків ви створили проєкт Next.js у локальному середовищі ServBay, навчилися запускати його у режимі розробки через зворотний проксі для live-перегляду, і деплоїти у виробничому режимі як статичний сайт через файловий сервер. Інтегроване середовище та зручне управління сайтами у ServBay суттєво спрощують цикл локальної розробки та тестування Next.js-додатків.