Детали API Routes

Вот важная информация, которую вам следует знать о API Routes.

Не запрашивайте API Route из getStaticProps или getStaticPaths

Не следует запрашивать API Route из getStaticProps или getStaticPaths. Вместо этого пишите серверный код непосредственно в getStaticProps или getStaticPaths (или вызывайте вспомогательную функцию).

Вот почему: getStaticProps и getStaticPaths выполняются только на стороне сервера и никогда на стороне клиента. Более того, эти функции не включаются в JS-бандл для браузера. Это означает, что вы можете писать код, например, прямые запросы к базе данных, без их отправки в браузер. Прочитайте документацию Написание серверного кода, чтобы узнать больше.

Хороший вариант использования: Обработка ввода формы

Хороший вариант использования API Routes — обработка ввода формы. Например, вы можете создать форму на странице и настроить отправку POST-запроса в ваш API Route. Затем вы можете написать код для сохранения данных непосредственно в вашу базу данных. Код API Route не будет частью клиентского бандла, поэтому вы можете безопасно писать серверный код.

export default function handler(req, res) {
  const email = req.body.email;
  // Затем сохраните email в вашу базу данных и т.д...
}

Режим предпросмотра

Статическая генерация (Static Generation) полезна, когда ваши страницы получают данные из headless CMS. Однако она не идеальна, когда вы пишете черновик в headless CMS и хотите предпросмотреть его сразу на странице. Вам нужно, чтобы Next.js рендерил эти страницы во время запроса, а не во время сборки, и загружал черновик вместо опубликованного контента. Вам нужно, чтобы Next.js обходил статическую генерацию только для этого конкретного случая.

У Next.js есть функция Preview Mode (Режим предпросмотра), которая решает эту проблему, и она использует API Routes. Чтобы узнать больше, ознакомьтесь с нашей документацией Preview Mode.

Динамические API Routes

API Routes могут быть динамическими, как и обычные страницы. Ознакомьтесь с нашей документацией Динамические API Routes, чтобы узнать больше.

Это всё!

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