Что такое Next.js? Простое руководство для создателей приложений

Next.js — фреймворк для создания сайтов и веб-приложений на React. React даёт строительные блоки интерфейса: кнопки, формы, списки. Next.js добавляет вокруг них остальную часть сайта: страницы и адреса, рендеринг страниц на сервере, чтобы они приходили уже готовыми к чтению, загрузку данных и запуск серверного кода в том же проекте. Это открытое программное обеспечение, созданное компанией Vercel, и один из самых распространённых способов создавать сайты на React.

Почему Next.js важен при создании приложений с ИИ

Когда вы описываете приложение конструктору с ИИ, ему нужно выбрать техническую основу. Этот выбор влияет на то, что вам важно потом:

• Видимость в поиске. Публичный сайт, который должен попадать в выдачу Google, выигрывает от отправки настоящего HTML, а Next.js с этим хорошо справляется.
• Где живёт бэкенд. Next.js позволяет держать страницы фронтенда и серверный код (например, «сохранить эту форму» или «вызвать платёжный API») в одном проекте.
• Хостинг. Приложению на Next.js с серверными функциями нужен сервер для работы, а простое приложение на Vite можно раздавать как статические файлы.

Mythex по умолчанию создаёт новые проекты на Vite + React + TypeScript + Tailwind и использует Next.js, если вы его попросите: достаточно написать «Используй Next.js» в первом запросе (как выбирается технология). Поэтому полезно знать, когда стоит это просить.

Бытовая аналогия

Если React — коробка качественных кубиков Lego, то Next.js — это набор Lego, в который уже входят инструкция, основание и детали для дверей и водопровода.

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

Что Next.js добавляет к React

У Next.js два способа организации страниц. App Router (папка app/) — более новый и поддерживает серверные компоненты. Pages Router (папка pages/) — исходный, он по-прежнему поддерживается. В новых проектах обычно используют App Router. Если код вашего ИИ-конструктора или туториал выглядит непонятно, часто причина именно в этом.

Пример: публичный каталог местных кофеен

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

Страница Next.js для одной кофейни может выглядеть примерно так:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Что происходит, когда кто-то (или Google) открывает /cafes/blue-door:

1. Next.js сопоставляет адрес с файлом. Папка [slug] означает «любая кофейня».
2. Компонент работает на сервере, читает кофейню из базы данных и собирает HTML.
3. Браузер получает полностью готовую страницу с названием и адресом кофейни — без ожидания, пока JavaScript загрузит данные.

Если бы это было обычное клиентское React-приложение, браузер сначала получил бы почти пустую страницу, потом скачал бы JavaScript, затем запросил бы кофейню и только после этого показал её. Поисковики часто справляются и с этим, но полностью готовая страница надёжнее. См. SEO для сайтов, созданных с ИИ.

Сравните с панелью для сотрудников за входом: поисковики всё равно её не увидят, поэтому серверный рендеринг даёт меньше пользы, и более простое приложение на Vite часто подходит лучше.

Ключевые термины

Частые заблуждения

• «Next.js заменяет React». Нет. Он использует React. Ваши компоненты по-прежнему компоненты React.
• «Next.js всегда лучший выбор». Он мощнее, но его и сложнее понять. Серверный рендеринг, кеширование и разница между серверным и клиентским кодом — частые источники запутанных ошибок. Для приложения, которое в основном за входом, обычное React-приложение часто проще.
• «Next.js работает только на Vercel». Он открытый и может работать на любом сервере Node.js или в контейнере Docker. Полный статический экспорт возможен, если не использовать серверные функции.
• «Next.js гарантирует хороший SEO». Он делает страницы удобнее для чтения поисковиками. Позиции по-прежнему зависят от заголовков, содержимого, скорости и ссылок.
• «Серверный код в Next.js автоматически приватный». Код, помеченный для клиента, попадает в браузер. Секреты должны оставаться в коде только для сервера и в переменных окружения.

Что попросить у конструктора ИИ

• «Используй Next.js с App Router» — в первом запросе, если это нужно.
• «Какие страницы рендерятся на сервере, какие статические, а какие работают в браузере — и почему?»
• «Сделай публичные маркетинговые страницы и страницы списков серверными или статическими, с нормальными заголовками и описаниями.»
• «Храни API-ключи в коде только для сервера и в переменных окружения. Покажи, где читается каждый из них.»
• «Нужен ли этому приложению Next.js, или для того, что мы строим, проще подойдёт Vite + React?»

Next.js в Mythex

Mythex по умолчанию использует Vite + React + TypeScript + Tailwind, а переходит на Next.js, когда вы попросите об этом в запросе; если назвать его сразу, это экономит кредиты по сравнению с переделкой позже. Приложение вы видите в живом предпросмотре (Preview), а Publish публикует его по живому адресу без настройки хостинга самостоятельно. В документации Mythex отмечено, что клиентские одностраничные приложения хуже подходят для SEO, чем страницы с серверным рендерингом или статические HTML, поэтому, если для маркетингового сайта важен поиск, стоит сказать об этом заранее (SEO для вашего приложения).

Вопросы