Разработка фронтенда сайта на Next.js
Типичная ситуация: вы запускаете React-приложение, а через пару месяцев замечаете, что LCP больше 4 секунд, а в Google Search Console сыплются предупреждения "CLS > 0.1". Переход на Next.js позволяет решить эти проблемы за счёт серверного рендеринга, автоматической оптимизации изображений и гибких стратегий сборки. Мы занимаемся фронтенд-разработкой 5+ лет и десятками проектов на Next.js — от лендингов до интернет-магазинов. Закажите аудит текущего сайта на Core Web Vitals — получите отчёт с рекомендациями.
Почему App Router вытесняет Pages Router?
С версии 13 основным подходом стал App Router (/app директория). В отличие от Pages Router, он по умолчанию использует серверные компоненты, что уменьшает размер клиентского бандла на 20–30% и улучшает Time to Interactive. Структура интуитивна:
app/ ├── layout.tsx — корневой layout (html, body) ├── page.tsx — главная страница ├── blog/ │ ├── page.tsx — /blog │ └── [slug]/ │ └── page.tsx — /blog/[slug] └── api/ └── route.ts — API endpoint App Router также поддерживает параллельные и интерсептивные маршруты, что упрощает модальные окна и сложные макеты. Если проект использует Pages Router, миграция возможна постепенно — оба роутера могут сосуществовать.
SSR vs SSG vs ISR: что выбрать?
Тип рендеринга зависит от характера контента. Вот сравнение:
| Стратегия | Скорость загрузки | Актуальность данных | Вариант использования |
|---|---|---|---|
| SSG (Static Site Generation) | Высокая (CDN) | Сборка: фиксированные данные | Блоги, документация, лендинги |
| SSR (Server Side Rendering) | Средняя (сервер) | Каждый запрос | Личный кабинет, дашборды, поиск |
| ISR (Incremental Static Regeneration) | Высокая+актуализация | Сборка+фоновая перестройка | Новостные порталы, интернет-магазины |
ISR — золотая середина: статика на CDN, но данные обновляются без полной пересборки. Наш опыт показывает, что ISR снижает затраты на инфраструктуру в 3-5 раз по сравнению с SSR.
Что такое Core Web Vitals и как их улучшить?
Ключевые метрики Core Web Vitals (LCP, INP, CLS) напрямую влияют на ранжирование. В Next.js есть встроенные инструменты: компонент <Image> автоматически конвертирует в WebP/AVIF, генерирует srcset и предотвращает layout shift. Для анализа бандла используем @next/bundle-analyzer — он показывает, какие зависимости раздувают сборку. Partial Prerendering (PPR) в Next.js 14+ позволяет комбинировать статический shell с динамическими Suspense-зонами, сокращая JS delivery. Также применяем React.cache() для дедупликации запросов — это снижает нагрузку на БД. По данным Google, LCP должен быть менее 2,5 секунд, а CLS — менее 0,1.
| Метрика | Целевое значение | Инструменты Next.js |
|---|---|---|
| LCP | <2.5 с | <Image> (next/legacy) + SSG/ISR |
| INP | <200 мс | Серверные компоненты, Suspense |
| CLS | <0.1 | <Image> с фиксированными размерами, fonts |
Как мы решаем типичные проблемы Next.js
Недавний кейс: клиент запустил сайт на Next.js с App Router, но загрузка страниц с товарами была медленной — N+1 запрос к DB. Мы переписали data fetching на React cache и добавили ISR с ревалидацией каждые 60 секунд. В результате LCP снизился с 3.8 с до 1.2 с. Ещё одна частая ошибка — hydration mismatch из-за разного времени на сервере и клиенте. Решение: использовать useEffect для клиентских состояний и suppressHydrationWarning для статического контента. Подробнее о подходах можно прочитать в документации Next.js.
Процесс работы
- Аудит и аналитика: изучаем текущий сайт, SEO-метрики, задачи бизнеса.
- Проектирование: выбираем стратегию рендеринга, структуру маршрутов, стек (TypeScript, Tailwind, Prisma).
- Разработка: реализуем компоненты, серверные экшены, метаданные, оптимизацию.
- Тестирование: проверяем Core Web Vitals, доступность, поведение на разных устройствах.
- Деплой и поддержка: заливаем на Vercel или Docker, настраиваем мониторинг, даём рекомендации.
Что входит в результат сдачи
- Исходники с комментариями и документацией - Инструкция по развёртыванию и обновлению контента - Доступы к репозиторию и панели хостинга - Обучение команды (если нужно) - Гарантия 1 месяц на баги после запускаСроки
Для информационного сайта (5–10 страниц, SSG, Tailwind CSS): 1–2 недели. Полноценный проект с App Router, Server Actions, авторизацией, динамическими страницами: 2–6 недель в зависимости от объёма. Стоимость рассчитывается индивидуально после брифа.
Оцените ваш проект — свяжитесь с нами для консультации. Получите предварительный план работ и сроки бесплатно. Также закажите комплексный SEO-аудит для выявления узких мест.