Как развернуть приложение Next.js

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

Несмотря на наличие различных вариантов развертывания, платформа Container as a Service (CaaS) от Back4app обладает рядом преимуществ. Эти преимущества делают ее привлекательным выбором для любого разработчика, желающего развернуть свое веб-приложение с помощью простых шагов.

В этой статье вы создадите приложение Next.js и узнаете, как можно разместить и развернуть это приложение с помощью службы контейнеризации Back4app.

Основные выводы

• Вы узнаете, как использовать облачную модель Container as a Service для быстрого и эффективного развертывания веб-приложений Next.js.

• Вы откроете для себя такие сильные стороны Next.js, как рендеринг на стороне сервера, автоматическое разделение кода, встроенная маршрутизация и генерация статических сайтов, которые повышают удобство работы с сайтом.

• Вы поймете потенциальные ограничения Next.js, такие как кривая обучения, ограниченная экосистема, сложность рендеринга на стороне сервера и ограниченная гибкость маршрутизации.

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

Next.js – это фреймворк с открытым исходным кодом, расширенный поверх библиотеки React для создания веб-приложений. С помощью Next.js вы можете удобно создавать серверные рендеринговые (SSR) и статически генерируемые React-приложения, которые будут соответствовать вашим потребностям.

Он был создан компанией Vercel (ранее известной как Zeit) в 2016 году. В последние годы Next.js завоевал большую популярность благодаря простоте использования и мощным функциям.

Преимущества Next.js

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

Рендеринг на стороне сервера

Фреймворк Next.js позволяет использовать серверный рендеринг в своих веб-приложениях. Server-Side Rendering позволяет предварительно рендерить страницы на сервере перед отправкой клиенту в виде HTML. Это обеспечивает лучшую поисковую оптимизацию (SEO).

При использовании рендеринга на стороне сервера ваши страницы рендерятся на сервере перед отправкой клиенту, что увеличивает время загрузки страниц. Это особенно полезно для пользователей с медленными соединениями или устройствами.

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

Автоматическое разделение кода

Под разделением кода понимается техника разбиения JavaScript-приложения и всего его кода на более мелкие фрагменты. Next.js автоматически разделяет код на основе маршрутов страницы.

Функция автоматического разделения кода Next.js позволяет ускорить загрузку начальной страницы. Она также уменьшает количество JavaScript, отправляемого клиенту, повышая производительность и удобство использования.

Встроенная маршрутизация

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

Эта система маршрутизации поддерживает динамическую маршрутизацию, повышая производительность разработчиков, улучшая работу приложений и обеспечивая плавное и эффективное взаимодействие с пользователями.

Маршруты API

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

Среди этих преимуществ – возможность создавать бессерверные функции, определять и организовывать конечные точки API, а также получать данные во время рендеринга на стороне сервера. Маршруты устраняют необходимость в отдельном внутреннем сервере. Они также поддерживают API REST и GraphQL.

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

Генерация статических сайтов

Генерация статических сайтов – ключевое преимущество фреймворка Next.js. Next.js использует статическую генерацию сайтов для предварительного рендеринга страниц во время сборки и их последующей передачи в виде статических файлов. Эта функция обеспечивает быструю загрузку страниц за счет предварительного рендеринга каждой страницы в HTML-файлы.

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

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

Ограничения Next.js

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

Кривая обучения

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

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

Ограниченная экосистема

Next.js – относительно новый фреймворк по сравнению с такими устоявшимися фреймворками/библиотеками, как React и Angular. В результате его экосистема все еще растет и находится в зачаточном состоянии. Он не имеет такого широкого спектра библиотек и плагинов, как более известные фреймворки.

Возможно, вам придется полагаться на пакеты, поддерживаемые сообществом, или создавать собственные решения под конкретные требования.

Сложность рендеринга на стороне сервера

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

Чаще всего он требует значительно больше времени на изучение и внедрение. Использование рендеринга на стороне сервера может привести к ошибкам рендеринга на сервере или несоответствиям между рендерингом на сервере и клиенте.

При реализации этого рендеринга лучше быть осторожным. Вы должны уметь эффективно управлять получением данных и состоянием приложения, поскольку сервер и клиент должны синхронизировать свои состояния.

Ограниченная гибкость маршрутизации

В Next.js встроена система маршрутизации, которая использует файловый подход к маршрутизации. Это позволяет упростить маршрутизацию во многих случаях. Однако она не может обеспечить такой же уровень гибкости, как более продвинутые библиотеки маршрутизации.

Настройка поведения маршрутизации, выходящая за рамки стандартных соглашений, может потребовать дополнительных обходных путей, которые не всегда удобны.

Варианты развертывания Next.js

Для приложений Next.js доступны различные варианты развертывания, включая контейнеры как сервис (CaaS) и инфраструктуру как сервис (IaaS).

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

Инфраструктура как услуга (IaaS)

IaaS – это модель облачных вычислений, которая предоставляет виртуализированные вычислительные ресурсы через Интернет. При использовании IaaS разработчики могут развертывать свои приложения и управлять ими на виртуальных машинах (ВМ), размещенных у облачного провайдера.

Развертывание приложения Next.js на платформе IaaS дает различные преимущества, включая контроль и гибкость. Платформы IaaS также экономически эффективны, поскольку работают по программе “плати по мере использования”. Это означает, что плата взимается в зависимости от ресурсов, которые в конечном итоге использует ваше приложение.

Среди популярных IaaS-платформ, которые можно использовать для развертывания приложений Next.js, можно назвать следующие:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Контейнер как услуга (CaaS)

CaaS – это модель облачных вычислений, похожая на платформу IaaS. Однако, помимо предоставления вычислительных ресурсов, они обеспечивают полностью управляемую среду для развертывания и управления контейнерными приложениями.

Это означает, что настройка и работа над запуском приложения занимают мало времени. Это также означает, что контроль над настройками очень ограничен.

При развертывании приложения Next.js в виде контейнера код приложения, среда выполнения и зависимости собираются в образ контейнера. Затем этот образ можно развернуть и запустить на платформе CaaS.

Среди популярных CaaS-платформ, на которых вы можете развернуть свои приложения Next.js, можно назвать следующие:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

Платформы CaaS упрощают развертывание. Они также повышают масштабируемость, переносимость и безопасность ваших приложений. Они абстрагируются от управления инфраструктурой и обеспечивают встроенную оркестровку и масштабирование.

Создание и развертывание приложения Next.js на Back4App

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

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

Что такое Back4app Containers?

Платформа Back4app CaaS – это платформа, которая предоставляет вам облачную модель обслуживания, позволяющую управлять и развертывать контейнеры и приложения в этих контейнерах.

Контейнеры Back4App – это мощная функция платформы Back4App, которая предоставляет вам гибкую, масштабируемую и безопасную среду для запуска ваших приложений.

Эти контейнеры поддерживают множество языков программирования, таких как PHP, Python, Node.js и т. д. Некоторые разработчики считают, что это отличная бесплатная платформа для хостинга Next.js.

Контейнеры Back4app могут автоматически масштабироваться в соответствии с вашими требованиями. Каждый контейнер изолирован от других, что обеспечивает защиту данных вашего приложения. Контейнеры легко интегрируются с экосистемой Back4App.

Это позволяет легко подключать контейнеры к другим сервисам Back4App, таким как базы данных и облачные функции.

Введение в проект

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

Вы можете пропустить сборку приложения Next.js и развернуть его на Back4app. Окончательный исходный код приложения можно найти в этом репозитории GitHub.

Пререквизиты

Чтобы следовать этому руководству и развернуть свое приложение Next.js на Back4app, вам необходимо выполнить следующие предварительные условия.

Убедитесь, что у вас есть:

• Понимание концепций библиотеки React
• Опыт работы с Docker, включая установку Docker
• Знакомство с Node.js и NPM
• Установленный на вашем компьютере Git и учетная запись GitHub.

Кодирование приложения Next.js

Чтобы создать строительные леса для приложения Next.js, выполните следующую команду в терминале node.js:

npx create-next-app@latest

После выполнения приведенной выше команды в терминале появится ряд подсказок. Эти подсказки предназначены для настройки вашего приложения Next.js.

Подсказки будут похожи на этот снимок экрана терминала.

Next.js настраивает ваше приложение в соответствии с ответами на вопросы. В этом приложении вам не понадобятся App Router и Tailwind CSS. Выберите “Нет” для этих опций.

Когда приложение будет создано, приступайте к созданию интерфейса.

Сначала добавьте следующие глобальные стили в файл globals.css:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

Вы можете найти файл globals.css в папке styles каталога src. После добавления глобальных стилей, чтобы применить их к вашему приложению, импортируйте файл globals.css в файл _app.tsx в директории pages.

Прежде чем импортировать файл globals.css в файл _app.tsx, необходимо создать компонент layout для определения макета приложения.

Для этого создайте папку компонента в каталоге src и файл Layout.tsx внутри этой папки. В файле Layout.tsx напишите следующий код:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

Блок кода выше определяет компонент Layout. В компонент Layout импортируются стили из файла Home.module.css и функция Comforter из модуля next/font/google.

Используя функцию Comforter, вы настраиваете шрифт Comforter и применяете его к элементу h1 в заголовке, устанавливая параметр className в значение comforter.className.

Выражение props.children выводит дочерние компоненты внутри компонента Layout.

Вы также должны определить стиль заголовка в файле Home.module.css и другие необходимые стили.

Например:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Теперь импортируйте файл global.css и компонент Layout в файл _app.tsx и оберните свое приложение в компонент Layout:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Вы определили макет своего приложения. Далее вы можете получить совет из API и отобразить его в приложении. Для этого вы используете файл index.tsx в каталоге pages.

В файле index.tsx замените существующий код следующим:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

Этот блок кода определяет домашнюю страницу. Он импортирует библиотеку React, файл Home.module.css для стилизации и шрифт Google Montserrat из библиотеки шрифтов Next.js.

Хук useEffect – это мощный инструмент, который позволяет выполнять побочные эффекты в компонентах React. В этом приложении вы использовали хук useEffect для получения совета из API. Затем совет, полученный из API, устанавливается в состояние совета.

Хук useEffect будет выполняться сначала при рендеринге компонента, а затем снова при изменении значения состояния count. Это происходит потому, что вы задали состояние count в качестве значения массива зависимостей.

Когда вы нажмете на кнопку generate, будет запущена функция handleClick, увеличивающая состояние count на 1. Это заставит хук useEffect снова запуститься, получить новый совет из API и обновить состояние совета. Каждый раз, когда вы нажимаете на кнопку генерации, на экране будет отображаться фрагмент нового совета.

Ваше приложение Next.js готово!

Чтобы запустить приложение, выполните следующую команду:

npm run dev

Приложение должно быть запущено на вашем локальном сервере http://localhost:3000.

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

Докеризация приложения

Перед развертыванием приложения Next.js на Back4app необходимо выполнить его докеризацию. При докеризации приложения ваше приложение и его зависимости будут упакованы в контейнеры Docker.

Контейнеры Docker – это легкий, изолированный и переносимый способ запуска приложений с необходимыми библиотеками и конфигурациями.

Это позволяет легко развертывать приложения на любой машине с установленным Docker. С докеризацией приложения упрощается развертывание, улучшается переносимость, масштабируемость и т. д.

Ниже приведено пошаговое руководство по докеризации приложения Next.js:

Шаг 1: Создайте Dockerfile в корневом каталоге проекта
Создайте новый файл с именем Dockerfile в корневом каталоге вашего проекта Next.js. Этот файл будет содержать инструкции для Docker по созданию образа вашего приложения.

Шаг 2: Определите свой Dockerfile
В Dockerfile введите следующий код:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Этот Dockerfile выполняет следующие действия:

• Запускается с официальной среды выполнения Node.js 14.
• Устанавливает в качестве рабочего каталога /app.
• Копирует package.json и package-lock.json в образ Docker и устанавливает зависимости.
• Копирует остальной код приложения в образ Docker.
• Создает приложение Next.js.
• Открывает порт 3000 для приложения.
• Определяет команду для запуска приложения.

Эти спецификации описывают среду, в которой будет работать ваше приложение.

Шаг 3: Создание образа Docker

Выполните следующую команду в терминале, чтобы собрать образ Docker:

docker build -t advice-generator .

Вы можете заменить “advice-generator” на имя, которое вы хотите дать своему образу Docker.

Запустите контейнер Docker

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

docker run -p 3000:3000 advice-generator 

Эта команда сопоставляет порт 3000 в контейнере Docker с портом 3000 на вашей машине.

Следуя этим шагам, вы запустите свое приложение Next.js в контейнере Docker. Вы можете получить к нему доступ, перейдя по адресу http://localhost:3000 в веб-браузере.

Отправка приложения Next.js на GitHub

После докеризации приложения вам необходимо поместить его в репозиторий GitHub. Чтобы перенести приложение в репозиторий GitHub, создайте новый репозиторий в своем аккаунте GitHub и выполните следующие команды в директории приложения на терминале:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Эта команда инициализирует новый Git-репозиторий в вашем текущем каталоге.
• git add: Эта команда добавляет все файлы из вашего текущего каталога в область хранения.
• git remote add origin : Эта команда связывает ваш локальный репозиторий с удалённым репозиторием. Замените на URL вашего удаленного хранилища.
• git commit -m ‘initial commit’: Эта команда берёт все изменения, записанные в области staging, и сохраняет их в новом коммите.
• git branch -M main: Эта команда создаёт новую ветку с именем main и переключается на неё.
• git push -u origin main: Эта команда переносит ваши коммиты в основной ветке в удалённый репозиторий origin.

Разверните приложение на Back4app

Чтобы развернуть свое приложение в Back4app, необходимо сначала создать учетную запись Back4app. Для этого выполните следующие шаги:

1. Посетите веб-сайт Back4app.
2. Нажмите на кнопку “Зарегистрироваться”.
3. Заполните форму регистрации и отправьте ее.

Если у вас уже есть настроенный аккаунт Back4app, вы можете просто войти в него и перейти к следующему шагу.

После создания учетной записи войдите в нее и нажмите кнопку “Новое приложение”.

Кнопка. Кнопку можно найти в правом верхнем углу экрана.

На экране появится окно, подобное показанному ниже.

Выберите опцию Container as a Service, чтобы собрать и развернуть приложение с помощью контейнеров. Сборка не должна занять много времени. По ее окончании привяжите свой аккаунт GitHub к собранному приложению CaaS.

Затем в приложении Back4app выберите репозиторий, который вы хотите развернуть из связанного аккаунта GitHub.

Теперь вы выбрали хранилище, осталось только развернуть приложение. Перед этим нужно дать ему имя и настроить развертывание.

Нажмите кнопку “Создать приложение”, чтобы развернуть ваше приложение.

Поздравляем, вы успешно развернули свое приложение на Back4app. Вы можете получить доступ к приложению в Интернете, перейдя по ссылке, предоставленной Back4app на экране выше.

Заключение

Next.js – это фреймворк с открытым исходным кодом для создания React-приложений с рендерингом на стороне сервера (SSR). Он обладает множеством преимуществ, включая генерацию статических сайтов, автоматическое разделение кода, встроенную маршрутизацию, маршруты API и т. д. Эти преимущества делают Next.js мощным фреймворком.

Развертывание приложения Next.js с помощью CaaS от Back4pp упрощает процесс разработки. Платформа Back4app CaaS – это масштабируемое, безопасное и экономически эффективное решение для развертывания приложений Next.js.

Удобный интерфейс, обновления в режиме реального времени, поддержка GraphQL и REST API, автоматическое резервное копирование и бессерверная среда делают его идеальным выбором для разработчиков.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ