Next.js: Быстрый старт и SEO-оптимизация

Next.js — фреймворк для создания быстрых и эффективных JavaScript веб-приложений на основе React. В отличие от чистых React-приложений, где рендеринг выполняется на стороне клиента, Next.js предлагает рендеринг на сервере, улучшая SEO-оптимизацию и предоставляя другие преимущества.

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

Встроенный роутинг: Навигация осуществляется через создание папок и файлов.
Рендеринг на сервере (SSR): Позволяет выполнять полный или частичный рендеринг страниц на сервере. Клиентский рендеринг также поддерживается (например, для динамической загрузки данных).
Встроенная поддержка аутентификации: Для упрощения регистрации и авторизации пользователей.
Встроенная поддержка CSS-модулей и TypeScript.
Утилиты для разработки и продакшн-среды.

Создание проекта с помощью Create Next App

Для быстрого создания приложения используйте npm-пакет create-next-app. Требуется Node.js.

Выполните команду:

npx create-next-app

Укажите имя проекта (например, hello-next). При создании можно выбрать опции подключения TypeScript, ESLint, Tailwind CSS и использовать App Router вместо Pages Router.

Структура проекта и запуск

После создания проекта (в папке hello-next) вы увидите папки App, Public и конфигурационные файлы (TypeScript, PostCSS, ESLint и др.).

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

npm run dev

Приложение будет доступно по адресу localhost:3000.

Изменение главной страницы

Роутинг в Next.js основан на папках и файлах. Главная страница расположена в файле pages/index.tsx (или app/page.tsx для App Router).

Удалите содержимое app/page.tsx.
Создайте и экспортируйте компонент Home:

export default function Home() {
  return <h1>Hello From Next.js</h1>;
}

Сохраните изменения. В браузере отобразится «Hello From Next.js». Инструменты разработчика покажут запрос к бэкенд-серверу и получение HTML-документа.

Добавление навигации и новой страницы

Файл app/layout.tsx содержит корневой шаблон. Добавьте в него навигационное меню:

import Link from 'next/link';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

Для создания страницы /about:

Создайте папку app/about.
Создайте в ней файл page.tsx:

export default function About() {
  return <h1>About Page</h1>;
}

Теперь ссылка /about будет работать.

Статический билд и продакшн

Для создания статического билда:

npm run build

Статические файлы будут в папке out.

Остановите приложение (Ctrl+C) и запустите в продакшене:

npm start

Запуск в продакшене с использованием статического билда значительно быстрее.

Примеры проектов

На странице npm-пакета create-next-app есть ссылки на примеры официальных проектов Next.js. Запустить их можно командой:

npx create-next-app -e <example-name> my-app

Замените <example-name> на имя примера.