Розроблення фронтенду сайту на 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'.
Стратегії рендерингу
// Статичний (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 }));
}
// Динамічний (SSR) — рендеряється на кожний запит
export const dynamic = 'force-dynamic';
// ISR — пересборка через N секунд
export const revalidate = 60;
Оптимізація зображень
Компонент <Image> автоматично:
- Конвертує в WebP/AVIF
- Генерує
srcsetдля різних дозволів - Ленивe завантаження за замовчуванням
- Запобігає зсуву макету з явними width/height
import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={630} alt="Hero" priority />
Metadata API
SEO через Metadata API App Router:
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.
Терміни
Фронтенд на Next.js для інформаційного сайту (5–10 сторінок, SSG, Tailwind CSS): 1–2 тижня. Повноцінний сайт з App Router, Server Actions, авторизацією, динамічними сторінками: 2–6 тижнів залежно від обсягу.