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

Для кого эта статья:

• Веб-разработчики, изучающие современные технологии и фреймворки для создания сайтов.
• Специалисты, заинтересованные в оптимизации производительности и SEO своих веб-приложений.

• Студенты и начинающие программисты, желающие освоить Next.js в рамках профессионального обучения.

  Next.js перевернул представление о веб-разработке, став золотым стандартом для создания быстрых, масштабируемых сайтов с SEO-преимуществами из коробки. Если вы еще застряли в эре классического React или jQuery — вы безнадежно отстали. По данным Stack Overflow 2023, более 42% крупных компаний переводят свои проекты на Next.js из-за 30% прироста в конверсии и скорости загрузки. В этом руководстве я разложу по полочкам весь процесс создания сайта на Next.js — от нуля до полноценного проекта, готового покорять поисковики и удерживать пользователей. 🚀

Хотите перейти от теории к практике и построить карьеру в веб-разработке? На курсе Обучение веб-разработке от Skypro вы не только освоите Next.js, но и весь современный стек технологий под руководством практикующих разработчиков. За 9 месяцев вы создадите реальные проекты для портфолио и получите поддержку в трудоустройстве. Инвестируйте в навыки, которые действительно востребованы на рынке.

Почему Next.js стал выбором №1 для современных сайтов

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

Ключевые причины доминирования Next.js:

• Гибридный рендеринг — свобода выбора между SSR, SSG и CSR на уровне отдельных страниц
• Автоматический код-сплиттинг — пользователи загружают только необходимый код
• Встроенная оптимизация изображений — автоматическая оптимизация для любых устройств
• Файловая система маршрутизации — интуитивно понятная структура без лишних конфигураций
• API Routes — бэкенд и фронтенд в едином репозитории

Михаил Соколов, Lead Frontend Developer

Три года назад наш стартап столкнулся с классической проблемой — поисковики не индексировали наш React SPA, а пользователи уходили из-за медленной первоначальной загрузки. Миграция на Next.js заняла всего две недели, но результаты ошеломили. Органический трафик вырос на 187% за квартал, а конверсия в регистрацию — на 34%.

Ключевым моментом стал серверный рендеринг критических страниц. Время до интерактивности сократилось с 4.8 до 1.2 секунды. Но самое ценное — разработчики перестали тратить время на настройку webpack, роутинга и оптимизаций. Экономия 30% времени на каждом спринте позволила сократить time-to-market почти вдвое.

Сравнение производительности популярных React-фреймворков:

По данным Web Almanac, сайты на Next.js в среднем набирают на 18 баллов больше в Google PageSpeed Insights, чем классические React-приложения. Это напрямую влияет на позиции в поисковой выдаче и удержание пользователей.

Мощная экосистема Vercel, стоящая за Next.js, гарантирует регулярные обновления и внедрение передовых технологий. Последние версии фреймворка уже поддерживают Streaming SSR и React Server Components — технологии, которые другие платформы только планируют внедрить. 🔥

Настройка проекта на Next.js: от установки до структуры

Настройка проекта на Next.js максимально упрощена, что позволяет сосредоточиться на разработке функционала, а не конфигурации инфраструктуры. Давайте создадим скелет проекта.

Требования перед началом работы:

• Node.js 14.6.0 или выше
• npm или yarn (предпочтительнее)
• Базовое понимание React

Создание проекта осуществляется одной командой:

npx create-next-app@latest my-next-app
# или
yarn create next-app my-next-app

В процессе создания вам зададут несколько вопросов о предпочтительной конфигурации:

После завершения установки, перейдите в директорию проекта и запустите его:

cd my-next-app
npm run dev
# или
yarn dev

Теперь приложение доступно по адресу http://localhost:3000.

Структура проекта Next.js с App Router выглядит следующим образом:

• src/app/ — директория с роутингом и страницами
• src/app/page.tsx — главная страница (аналог index.html)
• src/app/layout.tsx — основной шаблон сайта
• public/ — статические ресурсы (изображения, шрифты)
• next.config.js — конфигурация Next.js

Ключевое отличие Next.js от чистого React — файловая система маршрутизации. Каждая папка в директории app/ представляет сегмент URL-адреса, а файл page.tsx внутри папки создаёт доступную маршрутизируемую страницу.

Например:

• app/about/page.tsx → /about
• app/blog/[slug]/page.tsx → /blog/any-post-slug
• app/products/[category]/[id]/page.tsx → /products/electronics/12345

Для правильной организации проекта рекомендую создать следующие дополнительные директории:

• src/components/ — переиспользуемые компоненты
• src/lib/ — утилиты и хелперы
• src/hooks/ — кастомные React-хуки
• src/styles/ — глобальные стили
• src/types/ — TypeScript интерфейсы и типы

Базовая настройка завершена, и мы готовы переходить к созданию контента. Фреймворк уже позаботился о конфигурации Webpack, Babel, ESLint и других инструментов, которые обычно требуют ручной настройки в чистом React. 🛠️

Создание интерактивных страниц на Next.js с нуля

Создание страниц в Next.js — это область, где фреймворк демонстрирует свою истинную мощь. С введением App Router и React Server Components в Next.js 13+ мы получили революционный подход к разработке.

Начнем с модификации главной страницы. Откройте файл src/app/page.tsx и замените его содержимое:

export default function Home() {
return (
<main className="min-h-screen p-8">
<h1 className="text-4xl font-bold mb-6">
Добро пожаловать на мой сайт
</h1>
<p className="text-xl">
Создано с использованием Next.js
</p>
</main>
);
}

Обратите внимание: мы не импортировали React — Next.js делает это автоматически. Также здесь нет явного экспорта компонента как в классическом React — компонент страницы экспортируется по умолчанию.

Теперь создадим страницу "О нас". Для этого создайте директорию src/app/about и добавьте в неё файл page.tsx:

export default function About() {
return (
<div className="max-w-4xl mx-auto py-10">
<h1 className="text-3xl font-bold mb-4">О нас</h1>
<p className="mb-4">
Мы команда энтузиастов, создающих современные веб-приложения.
</p>
</div>
);
}

Теперь страница доступна по адресу /about без какой-либо дополнительной настройки маршрутизации.

Алексей Петров, Senior Frontend Architect

Однажды мне поручили полностью переработать корпоративный портал на 50+ страниц за 3 месяца. Сроки были невероятно сжатые, а команда всего из трёх разработчиков. Решение использовать Next.js сыграло ключевую роль.

Самым сложным был раздел с аналитикой и дашбордами. В старой версии на Vue.js пользователи ждали загрузки данных до 15 секунд! Мы применили стратегию ISR (Incremental Static Regeneration), когда страницы предварительно генерировались, но обновлялись каждые 10 минут. Это дало моментальную загрузку страниц с актуальными данными.

Встроенная в Next.js система кэширования и API Routes позволила избавиться от отдельного прокси-сервера для безопасных запросов к внутреннему API компании. Проект был запущен на 2 недели раньше срока, а производительность выросла в 4 раза по метрикам Core Web Vitals.

Для создания динамических страниц, например блога с постами, используем квадратные скобки в названии папки. Создайте структуру src/app/blog/[slug]/page.tsx:

interface BlogPostParams {
params: {
slug: string;
}
}

export default function BlogPost({ params }: BlogPostParams) {
return (
<article className="max-w-2xl mx-auto py-10">
<h1 className="text-3xl font-bold mb-4">
Статья: {params.slug.replace(/-/g, ' ')}
</h1>
<p>Здесь будет содержимое статьи...</p>
</article>
);
}

Теперь любой URL вида /blog/название-статьи будет обрабатываться этим компонентом, а часть пути в [slug] будет доступна через params.slug.

Важный аспект Next.js — разделение между серверными и клиентскими компонентами. По умолчанию все компоненты в App Router — серверные, что даёт потрясающую производительность и SEO. Но если вам нужна интерактивность, используйте директиву "use client":

'use client';

import { useState } from 'react';

export default function Counter() {
const [count, setCount] = useState(0);

return (
<div className="my-8 p-4 border rounded">
<p className="mb-4">Счётчик: {count}</p>
<button 
onClick={() => setCount(count + 1)}
className="bg-blue-500 text-white px-4 py-2 rounded"
>
Увеличить
</button>
</div>
);
}

Теперь создадим новую страницу, которая будет использовать этот клиентский компонент. Создайте файл src/app/interactive/page.tsx:

import Counter from '@/components/Counter';

export default function InteractivePage() {
return (
<div className="max-w-4xl mx-auto py-10">
<h1 className="text-3xl font-bold mb-4">
Интерактивная страница
</h1>
<p className="mb-6">
Эта страница демонстрирует клиентские компоненты
</p>
<Counter />
</div>
);
}

Такое разделение позволяет достичь оптимального баланса между производительностью и интерактивностью. Серверные компоненты рендерятся на сервере и отправляются клиенту в готовом виде, минимизируя JavaScript-бандл. Клиентские компоненты гидратируются на стороне клиента, обеспечивая интерактивность. 🔄

Интеграция API и работа с данными в приложении Next.js

Одно из главных преимуществ Next.js — элегантная работа с данными через различные подходы: от серверных компонентов до встроенных API Routes. Рассмотрим основные способы получения и отображения данных.

Начнем с создания API-эндпоинта внутри Next.js. Создайте файл src/app/api/products/route.ts:

import { NextResponse } from 'next/server';

export async function GET() {
// Имитация получения данных из БД
const products = [
{ id: 1, name: 'Смартфон Pro', price: 999 },
{ id: 2, name: 'Ноутбук Ultra', price: 1299 },
{ id: 3, name: 'Наушники Wireless', price: 199 }
];

return NextResponse.json(products);
}

Теперь у нас есть REST API по адресу /api/products, который возвращает JSON с товарами. Next.js автоматически обрабатывает HTTP-заголовки и сериализацию JSON.

Далее создадим страницу для отображения этих товаров с использованием серверных компонентов. Создайте файл src/app/products/page.tsx:

// Серверный компонент – получает данные на сервере
async function getProducts() {
// В реальном приложении здесь был бы запрос к внешнему API или БД
const res = await fetch('http://localhost:3000/api/products', {
cache: 'no-store' // Получать свежие данные при каждом запросе
});

if (!res.ok) {
throw new Error('Failed to fetch products');
}

return res.json();
}

export default async function ProductsPage() {
const products = await getProducts();

return (
<div className="max-w-4xl mx-auto py-10">
<h1 className="text-3xl font-bold mb-6">Наши товары</h1>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-6">
{products.map((product) => (
<li 
key={product.id}
className="border p-4 rounded shadow"
>
<h2 className="text-xl font-semibold">{product.name}</h2>
<p className="text-green-600 font-medium">${product.price}</p>
</li>
))}
</ul>
</div>
);
}

Важно отметить, что в серверных компонентах мы можем использовать async/await прямо в компоненте, без дополнительных хуков или состояний — данные будут получены на сервере до отправки HTML клиенту.

Для более сложных случаев, когда требуется динамическая загрузка данных на клиенте, используем клиентский компонент с SWR — библиотекой для получения данных с кэшированием:

'use client';

import { useState } from 'react';
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function ProductsClient() {
const [category, setCategory] = useState('all');

const { data, error, isLoading } = useSWR(
`/api/products?category=${category}`,
fetcher
);

if (isLoading) return <div>Загрузка...</div>;
if (error) return <div>Ошибка загрузки данных</div>;

return (
<div>
<select 
value={category}
onChange={(e) => setCategory(e.target.value)}
className="mb-4 p-2 border rounded"
>
<option value="all">Все категории</option>
<option value="electronics">Электроника</option>
<option value="clothing">Одежда</option>
</select>

<ul className="grid gap-4">
{data.map((product) => (
<li key={product.id} className="border p-3 rounded">
{product.name} – ${product.price}
</li>
))}
</ul>
</div>
);
}

Для работы с формами и отправкой данных создадим пример формы обратной связи:

'use client';

import { useState } from 'react';

export default function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const [status, setStatus] = useState('');

async function handleSubmit(e) {
e.preventDefault();
setStatus('loading');

try {
const response = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});

if (response.ok) {
setStatus('success');
setFormData({ name: '', email: '', message: '' });
} else {
setStatus('error');
}
} catch (error) {
setStatus('error');
}
}

return (
<form onSubmit={handleSubmit} className="max-w-md mx-auto">
{/* Здесь поля формы */}
{status === 'success' && (
<p className="text-green-600">Сообщение отправлено!</p>
)}
</form>
);
}

Сравнение подходов к работе с данными в Next.js:

Встроенные API Routes в Next.js избавляют от необходимости создавать отдельный бэкенд для многих задач, что значительно упрощает разработку и деплой. Все API-эндпоинты автоматически изолированы от клиентского кода, что обеспечивает безопасность чувствительных данных, таких как ключи API. 🔒

Развертывание сайта на Next.js: оптимизация и публикация

Процесс деплоя Next.js-приложения кардинально отличается от классических React SPA благодаря возможности серверного рендеринга и гибридной генерации страниц. Рассмотрим процесс оптимизации и публикации от подготовки до мониторинга.

Перед публикацией убедитесь, что ваш проект полностью оптимизирован. Ключевые шаги оптимизации:

• Анализ бандла — запустите npx next build и изучите отчёт о размерах бандлов
• Оптимизация изображений — используйте компонент next/image вместо img
• Code splitting — разделите код на чанки с помощью динамического импорта
• Предварительная загрузка — используйте next/link для автоматического префетчинга
• Оптимизация шрифтов — применяйте next/font для локальных оптимизированных шрифтов

Для минимизации размера JavaScript-бандла используйте динамический импорт компонентов:

import dynamic from 'next/dynamic';

// Компонент загрузится только при необходимости
const HeavyComponent = dynamic(() => import('@/components/HeavyComponent'), {
loading: () => <p>Загрузка...</p>,
ssr: false // Отключить SSR для этого компонента
});

Оптимизируйте изображения с помощью встроенного компонента:

import Image from 'next/image';

<Image 
src="/hero.jpg" 
alt="Hero" 
width={1200} 
height={600} 
priority // Для LCP изображений
quality={85} 
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
/>

Настройка среды для продакшена включает несколько важных параметров в файле next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'standalone', // Оптимизированный для контейнеризации вывод
compress: true, // Gzip компрессия
poweredByHeader: false, // Убираем заголовок X-Powered-By
images: {
domains: ['example.com'], // Разрешенные домены для изображений
formats: ['image/webp'] // Предпочтительные форматы
},
experimental: {
optimizeCss: true, // Минификация CSS
}
};

module.exports = nextConfig;

Основные платформы для деплоя Next.js-приложений:

Самый простой и рекомендуемый способ деплоя — использование Vercel, платформы от создателей Next.js. Процесс деплоя через Vercel:

1. Зарегистрируйтесь на Vercel и подключите репозиторий GitHub/GitLab
2. Настройте переменные окружения в интерфейсе Vercel
3. Нажмите "Import" и Vercel автоматически определит Next.js проект
4. После деплоя Vercel предоставит URL для вашего сайта
5. Каждый новый коммит в main/master ветку автоматически деплоится
6. Pull Request получают уникальные превью-URL для тестирования

Для ручного деплоя на собственный сервер, следуйте этим шагам:

1. Выполните сборку проекта: npm run build
2. Для Node.js-сервера запустите: npm start
3. Для статического экспорта настройте output: 'export' в next.config.js и разверните содержимое папки out/ на любом статическом хостинге
4. Для Docker создайте Dockerfile, использующий multistage builds для минимизации размера образа

После деплоя критично настроить мониторинг производительности. Используйте:

• Vercel Analytics — встроенный мониторинг Core Web Vitals
• Google PageSpeed Insights — для регулярной проверки метрик
• Sentry — для отслеживания ошибок и производительности в реальном времени
• LogRocket — для воспроизведения пользовательских сессий

Настройка CI/CD значительно упрощает процесс разработки и деплоя. Пример конфигурации GitHub Actions для Next.js:

name: Deploy Next.js

on:
push:
branches: [ main ]

jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Build
run: npm run build
# Далее шаги деплоя на ваш хостинг

Правильная настройка деплоя Next.js приложения — ключ к максимальной производительности и удобству разработки. С автоматизированным процессом CI/CD и мониторингом вы сможете сосредоточиться на улучшении функциональности, а не решении инфраструктурных проблем. 🚀

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