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

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

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

Основные особенности и преимущества Next.js

Серверный рендеринг (SSR): улучшает скорость загрузки страниц и SEO.
Статическая генерация сайтов (SSG): предварительный рендеринг статических страниц для повышения производительности и улучшения пользовательского опыта.
Автоматическое разделение кода: загружается только необходимый JavaScript для текущей страницы, что оптимизирует производительность.
Встроенная маршрутизация: маршрутизация на основе системы файлов, не требующая дополнительной настройки.
Маршрутизация API: возможность создания API-эндпоинтов в одном проекте.
Встроенная поддержка CSS и Sass: удобное управление стилями.

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

Создание и запуск проекта Next.js с помощью ServBay

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

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

Инициализация проекта
Во-первых, убедитесь, что у вас уже установлено окружение Node.js, предоставленное ServBay. Затем используйте следующую команду для инициализации нового проекта Next.js:
bash
```
cd /Applications/ServBay/www
npx create-next-app@latest servbay-next-app
```
1
2
Следуйте инструкциям по указанию имени проекта (рекомендуется назвать его servbay-next-app), и выбирайте другие опции по необходимости.
Установка зависимостей
Перейдите в директорию проекта и установите зависимости:
bash
```
cd servbay-next-app
npm install
```
1
2

Изменение выходного содержимого проекта Next.js

Изменение файла pages/index.js
Откройте файл pages/index.js и измените содержимое для вывода "Hello ServBay!":
javascript
```
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
    </div>
  );
}
```
1
2
3
4
5
6
7

Вход в режим разработки

Запуск сервера разработки
Запустите сервер разработки и укажите порт (например: 8585):
bash
```
npm run dev -- -p 8585
```
1
Это запустит локальный сервер разработки и откроет порт 8585.
Настройка обратного прокси ServBay
Используйте функцию «хостинг» от ServBay для доступа к серверу разработки через обратное прокси. В настройках хостинга ServBay добавьте новое обратное прокси:
- Имя: My first Next.js dev site
- Домен: servbay-next-test.dev
- Тип хостинга: Обратное прокси
- IP: 127.0.0.1
- Порт: 8585
Подробные шаги настройки можно найти в разделе добавление сайта для разработки Nodejs.
Доступ к режиму разработки
Откройте браузер и перейдите по адресу https://servbay-next-test.dev, чтобы в реальном времени просматривать проект. Поскольку ServBay поддерживает пользовательские домены и бесплатные SSL-сертификаты, вы получите более высокий уровень безопасности.

Создание продакшен-версии

Сборка продакшен-версии
После завершения разработки используйте следующую команду для сборки продакшен-версии:
bash
```
npm run build
npm run export
```
1
2
После сборки сгенерированные статические файлы будут находиться в директории out.
Настройка сервиса статических файлов
Используйте функцию «хостинг» от ServBay для доступа к продакшен-версии через сервис статических файлов. В настройках хостинга ServBay добавьте новый статический сайт:
- Имя: My first Next.js production site
- Домен: servbay-next-test.prod
- Тип хостинга: Статический
- Корневая директория сайта: /Applications/ServBay/www/servbay-next-app/out
Доступ к продакшен-версии
Откройте браузер и перейдите по адресу https://servbay-next-test.prod, чтобы просмотреть собранную продакшен-версию. С помощью пользовательских доменов и бесплатных SSL-сертификатов от ServBay ваш сайт будет обладать более высокой безопасностью и доверием.

Следуя этим шагам, вы успешно создадите и запустите проект Next.js, а также используете функциональные возможности ServBay для управления и доступа к вашему проекту.