Создание и запуск проекта 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

1. Инициализация проекта

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

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Следуйте инструкциям по указанию имени проекта (рекомендуется назвать его servbay-next-app), и выбирайте другие опции по необходимости.

2. Установка зависимостей

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

   cd servbay-next-app
   npm install

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

1. Изменение файла pages/index.js

   Откройте файл pages/index.js и измените содержимое для вывода "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

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

1. Запуск сервера разработки

   Запустите сервер разработки и укажите порт (например: 8585):

   npm run dev -- -p 8585

   Это запустит локальный сервер разработки и откроет порт 8585.

2. Настройка обратного прокси ServBay

   Используйте функцию «хостинг» от ServBay для доступа к серверу разработки через обратное прокси. В настройках хостинга ServBay добавьте новое обратное прокси:

   • Имя: My first Next.js dev site
   • Домен: servbay-next-test.dev
   • Тип хостинга: Обратное прокси
   • IP: 127.0.0.1
   • Порт: 8585

   Подробные шаги настройки можно найти в разделе добавление сайта для разработки Nodejs.

3. Доступ к режиму разработки

   Откройте браузер и перейдите по адресу https://servbay-next-test.dev, чтобы в реальном времени просматривать проект. Поскольку ServBay поддерживает пользовательские домены и бесплатные SSL-сертификаты, вы получите более высокий уровень безопасности.

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

1. Сборка продакшен-версии

   После завершения разработки используйте следующую команду для сборки продакшен-версии:

   npm run build
   npm run export

   После сборки сгенерированные статические файлы будут находиться в директории out.

2. Настройка сервиса статических файлов

   Используйте функцию «хостинг» от ServBay для доступа к продакшен-версии через сервис статических файлов. В настройках хостинга ServBay добавьте новый статический сайт:

   • Имя: My first Next.js production site
   • Домен: servbay-next-test.prod
   • Тип хостинга: Статический
   • Корневая директория сайта: /Applications/ServBay/www/servbay-next-app/out

3. Доступ к продакшен-версии

   Откройте браузер и перейдите по адресу https://servbay-next-test.prod, чтобы просмотреть собранную продакшен-версию. С помощью пользовательских доменов и бесплатных SSL-сертификатов от ServBay ваш сайт будет обладать более высокой безопасностью и доверием.

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