Що таке Next.js? Простий посібник для творців застосунків

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

Чому Next.js важливий, коли ви створюєте з ШІ

Коли ви описуєте застосунок конструктору на ШІ, той має обрати технічну основу. Цей вибір визначає речі, які вам важливі пізніше:

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

Mythex за замовчуванням починає нові проєкти з Vite + React + TypeScript + Tailwind і використовує Next.js, коли ви його просите: достатньо написати «Use Next.js» у першому запиті (як обирається технологія). Тому корисно знати, коли це варто просити.

Повсякденна аналогія

Якщо React — це коробка якісних конструкторів Lego, то Next.js — це набір Lego з готовими інструкціями, основою та деталями для дверей і водогону.

Можна побудувати той самий будинок із окремих деталей — просто самому треба вирішити, як з'єднати кімнати, де буде вхідні двері і як провести воду. Next.js робить ці рішення за вас стандартним способом, тож кожен проєкт Next.js влаштований подібно, і новий розробник (або ШІ) швидко орієнтується.

Що Next.js додає до React

У Next.js є два способи організації сторінок. App Router (папка app/) — новіший і підтримує Server Components. 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 зіставляє URL з цим файлом. Папка [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 розгортає його за живою URL-адресою без налаштування хостингу самостійно. У документації Mythex зазначено, що single-page застосунки з рендерингом на клієнті мають слабше SEO, ніж сторінки з серверним рендерингом або статичний HTML, тож для маркетингового сайту, де важливий пошук, варто сказати про це одразу (SEO для вашого застосунку).

Запитання