Как создать быстрый сайт на Next.js: полное руководство

Next.js — один из самых популярных фреймворков для создания современных веб-приложений. В этой статье я расскажу, как создать быстрый, SEO-оптимизированный сайт на Next.js с нуля.

Почему Next.js?

Next.js предоставляет множество преимуществ:

• Server-Side Rendering (SSR) — улучшает SEO и время первой загрузки
• Static Site Generation (SSG) — для максимальной производительности
• Автоматическая оптимизация — изображения, шрифты, код
• Встроенный роутинг — файловая система как маршрутизация
• API Routes — создание backend без отдельного сервера

Начало работы

Установка

Копировать
1npx create-next-app@latest my-website --typescript --tailwind --app
2cd my-website

Структура проекта

src/
├── app/
│   ├── layout.tsx      # Корневой layout
│   ├── page.tsx         # Главная страница
│   ├── about/
│   │   └── page.tsx     # Страница "О нас"
│   └── api/
│       └── route.ts     # API endpoints
├── components/          # React компоненты
├── lib/                 # Утилиты
└── public/              # Статические файлы

Оптимизация производительности

1. Использование Image компонента

Next.js автоматически оптимизирует изображения:

Копировать
1import Image from 'next/image';
2
3export default function Hero() {
4  return (
5    <Image
6      src="/hero.jpg"
7      alt="Hero image"
8      width={1200}
9      height={600}
10      priority
11      placeholder="blur"
12    />
13  );
14}

2. Code Splitting

Динамические импорты для разделения кода:

Копировать
1import dynamic from 'next/dynamic';
2
3const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
4  loading: () => <div>Загрузка...</div>,
5  ssr: false,
6});

3. Static Generation для статических страниц

Копировать
1export async function generateStaticParams() {
2  return [
3    { slug: 'post-1' },
4    { slug: 'post-2' },
5  ];
6}
7
8export default async function Post({ params }: { params: { slug: string } }) {
9  const post = await getPost(params.slug);
10  return <article>{post.content}</article>;
11}

SEO оптимизация

Мета-теги

Копировать
1import type { Metadata } from 'next';
2
3export const metadata: Metadata = {
4  title: 'Мой сайт | Главная',
5  description: 'Описание сайта для поисковых систем',
6  openGraph: {
7    title: 'Мой сайт',
8    description: 'Описание',
9    images: ['/og-image.jpg'],
10  },
11};

Структурированные данные

Копировать
1export default function HomePage() {
2  const jsonLd = {
3    '@context': 'https://schema.org',
4    '@type': 'WebSite',
5    name: 'Мой сайт',
6    url: 'https://mysite.com',
7  };
8
9  return (
10    <>
11      <script
12        type="application/ld+json"
13        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
14      />
15      {/* Контент */}
16    </>
17  );
18}

Деплой в production

Vercel (рекомендуется)

Копировать
1npm i -g vercel
2vercel

Vercel автоматически оптимизирует Next.js приложения и предоставляет:

• CDN для статических файлов
• Автоматический SSL
• Preview deployments
• Analytics

Заключение

Next.js — мощный инструмент для создания быстрых и SEO-оптимизированных сайтов. Следуя этим практикам, вы создадите сайт, который будет быстро загружаться и хорошо ранжироваться в поисковых системах.

Ключевые моменты:

• Используйте SSG для статического контента
• Оптимизируйте изображения через Image компонент
• Настройте правильные мета-теги
• Добавьте структурированные данные
• Используйте code splitting для больших компонентов