Разработка фронтенда сайта на Next.js

Разработка фронтенда сайта на Next.js

Next.js — React-фреймворк с SSR, SSG, ISR, App Router и встроенной оптимизацией. Выбор между Next.js и SPA зависит от требований: Next.js нужен там, где важны SEO, первоначальное время загрузки и серверная бизнес-логика рядом с UI.

App Router vs Pages Router

С Next.js 13+ основной подход — App Router (/app директория):

app/
├── layout.tsx          — корневой layout (html, body)
├── page.tsx            — главная страница
├── blog/
│   ├── page.tsx        — /blog
│   └── [slug]/
│       └── page.tsx    — /blog/[slug]
└── api/
    └── route.ts        — API endpoint

Серверные компоненты (RSC) по умолчанию — рендерятся на сервере, не включают JS в бандл клиента. Клиентские — 'use client' директива.

Стратегии рендеринга

// Static (SSG) — генерируется при сборке
export default async function BlogPost({ params }) {
  const post = await db.post.findUnique({ where: { slug: params.slug } });
  return <article>{post.content}</article>;
}
export async function generateStaticParams() {
  const posts = await db.post.findMany({ select: { slug: true } });
  return posts.map(p => ({ slug: p.slug }));
}

// Dynamic (SSR) — рендерится на каждый запрос
export const dynamic = 'force-dynamic';

// ISR — пересборка через N секунд
export const revalidate = 60;

Оптимизация изображений

<Image> компонент Next.js автоматически:

• Конвертирует в WebP/AVIF
• Генерирует srcset для разных разрешений
• Lazy loading по умолчанию
• Prevent layout shift через explicit width/height

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={630} alt="Hero" priority />

Metadata API

SEO через App Router Metadata API:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Заголовок | Сайт',
  description: 'Описание страницы',
  openGraph: {
    title: 'OG Заголовок',
    images: [{ url: '/og.jpg', width: 1200, height: 630 }],
  },
};

// Динамическая metadata
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await fetchPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Server Actions

Формы без API-роутов через Server Actions:

'use server';
async function submitForm(formData: FormData) {
  const name = formData.get('name');
  await db.contact.create({ data: { name } });
  revalidatePath('/contacts');
}

// В компоненте
<form action={submitForm}>
  <input name="name" />
  <button type="submit">Отправить</button>
</form>

Производительность

• Bundle analyzer: @next/bundle-analyzer — находит тяжёлые зависимости
• Partial Prerendering (PPR): статический shell + динамические suspense-зоны (Next.js 14+)
• React cache(): дедупликация fetch-запросов внутри одного рендера

Деплой

Next.js нативно деплоится на Vercel (zero-config). Альтернативы: Netlify, Docker-контейнер с next start, Coolify для self-hosted.

Сроки

Frontend на Next.js для информационного сайта (5–10 страниц, SSG, Tailwind CSS): 1–2 недели. Полноценный сайт с App Router, Server Actions, авторизацией, динамическими страницами: 2–6 недель в зависимости от объёма.