Создание сайта на Next.js: практическое руководство для бизнеса

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

После прочтения вы поймёте, как спроектировать структуру, выбрать режимы рендеринга, организовать папку pages, прописать мета-теги и техническое SEO так, чтобы не пришлось «чинить SEO потом». Мы используем тот же подход, который применяем в проектах команды блога: от лендингов до сложных CRM и интернет-магазинов на Next.js, где SEO встроено в архитектуру, а не прикручено в конце.

Архитектура под SEO: как Next.js помогает «заложить» правильный фундамент

Next.js даёт три ключевых режима рендеринга, и выбор между ними — фактически SEO-решение.

• SSR (Server-Side Rendering) — HTML формируется на server при каждом запросе через getServerSideProps. Полезно, когда данные меняются каждую минуту и критична персонализация.
• SSG (Static Site Generation) — HTML создаётся на этапе npm run build через getStaticProps. Идеально для стабильного контента: статьи, обзоры, «вечнозелёные» страницы.
• ISR (Incremental Static Regeneration) — гибрид: страница генерируется как статика, но переcобирается по таймеру (revalidate), не останавливая трафик.

Практический ориентир по SEO-задачам:

• Каталоги, блог, обзоры — чаще всего SSG или ISR. Поисковик получает быстрый HTML, пользователи — мгновенную загрузку, а вы можете управлять свежестью через revalidate.
• Карточки товаров с актуальными ценами, сложные фильтры, личные кабинеты — здесь уместен SSR или клиентский javascript-рендер, если страница не нужна в индексе.

Пример: интернет-магазин с блогом. Категории и статьи генерируются SSG/ISR, чтобы сотни тысяч URL типа /blog/[slug] и /catalog/[category] быстро отдавались из статики. Корзина, checkout и личный кабинет — на SSR или CSR, потому что они либо не индексируются, либо требуют свежих данных from внешнего api.

Файловая маршрутизация в папке pages напрямую формирует URL. Папка pages/blog + файл [slug].tsx даёт вам чистую структуру /blog/название-stati, а pages/services/[service]/[slug].tsx — логичную вложенность для услуг. Короткие, человеко-понятные URL повышают CTR из выдачи и помогают поисковикам понимать иерархию. Частая ошибка — сначала «накидать» структуру ради удобства разработки, а потом пытаться переделать URL. В Next.js менять маршрутизацию после запуска больно: ломаются ссылки, теряется накопленный вес. Продумать её стоит до первой команды npm run dev.

Пошаговое создание сайта на next js с учётом SEO: от прототипа до контента

1. Шаг 1. Формируем структуру и карту сайта
2. Начинать стоит не с команды npx create-next-app, а с карты запросов и карты сайта. Выпишите разделы: home (главная), услуги или продукты, кейсы, блог, FAQ, контакты. Отметьте «денежные» страницы (конверсия) и страницы, которые будут тянуть трафик (блог, обзоры, сравнения).
3. Затем спроецируйте это на pages:

• pages/index.tsx — home page.
• pages/services/index.tsx + pages/services/[slug].tsx — список услуг и карточки.
• pages/blog/index.tsx + pages/blog/[slug].tsx — блог.
• pages/faq.tsx, pages/cases/[slug].tsx и т.д.

1. Мини-пример сервиса: карта сайта включает /, /pricing, /features, /blog, /blog/[slug], /integrations/[slug]. Такая же иерархия появляется в pages, что облегчает и разработку, и SEO-аналитику: урлы отражают структуру кластера запросов.
2. Шаг 2. Настройка проекта Next.js с базовой SEO-опорой
3. После npx create-next-app и первого npm run dev сразу закладывайте общий каркас. Создайте компонент Layout, который будет оборачивать каждую page и содержать базовый <head>: дефолтный <title>, description, фавиконки, open graph по умолчанию.
4. Сделайте helper-функцию на javascript, что-то вроде seoConfig(pageTitle, description), которая возвращает объект с мета-данными. Этот object можно превращать в теги через компонент, а данные — получать from getStaticProps или CMS. Так вы избежите дублирования <title>, пустых description и хаоса в meta-тегах, который обычно вылезает, когда проект уже ушёл в прод и каждый разработчик пишет «как привык».
5. Шаг 3. Контентные шаблоны под SEO-страницы
6. Вместо того чтобы каждую продающую page верстать с нуля, создайте 2–3 шаблона. Например, шаблон услуги: блок оффера, преимущества, социальное доказательство, FAQ, форма заявки. Второй — для статей: H1, блок с датой и автором, оглавление, тело текста, блок «Похожие материалы» и CTA.
7. В Next.js это удобно реализуется динамическими маршрутами: pages/services/[slug].tsx и pages/blog/[slug].tsx получают контент from Markdown, CMS или headless CMS через api, парсят json и отрисовывают одну и ту же React function-компоненту с разными данными. Важно заранее предусмотреть в шаблонах:

• одно H1 на страницу и логичную иерархию H2–H3;
• места под внутренние ссылки: «другие услуги», «похожие кейсы», ссылки из текста;
• зоны под структурированную разметку (FAQ, Article).

1. Так любая новая статья или услуга автоматически выходит с корректной структурой, а не превращается в уникальное дизайнерское решение без шансов на масштаб.
2. Шаг 4. Рендеринг и данные: getStaticProps / getServerSideProps с прицелом на SEO
3. Для блога оптимальный путь — getStaticProps и getStaticPaths. При npm run build Next.js обходит все slug, делает запросы к api, генерирует HTML и кладёт в статику. Поисковый робот получает готовый контент, пользователи — мгновенную отдачу from edge-сети.
4. Для страниц, которые меняются раз в час-два (например, список акций), используйте ISR: указываете revalidate, и Next.js пересобирает статику в фоне. Если данные должны быть свежими на каждый запрос — включайте SSR через getServerSideProps, понимая, что каждая такая page дороже по времени ответа server.
5. Частые ошибки:

• рендерить всё на клиенте (CSR) — поисковики уже умеют javascript, но лишний риск и потеря скорости на мобильных;
• ставить SSR на десятки тысяч страниц, которые могли бы быть статичными, и потом удивляться медленному TTFB и просадке в Core Web Vitals.

1. Шаг 5. Техническая SEO-настройка в Next.js
2. Подключите генерацию sitemap и robots. Быстрый путь — пакет next-sitemap, который собирает карту сайта из маршрутов и создаёт sitemap.xml при npm run build. В robots.txt запретите индексацию служебных URL и черновиков.
3. Для динамических страниц задавайте canonical: либо вычисляйте его в getStaticProps, либо в layout-слое, чтобы избежать дублей типа ?page=2 или бесконечных комбинаций фильтров. Добавьте хлебные крошки и структурированные данные (JSON-LD) на ключевые страницы — для этого достаточно один раз написать helper, который собирает json-структуру из props и отдаёт её в скрипт.
4. Оптимизацию скорости Next.js частично делает сам (code splitting), но используйте это осознанно: выносите тяжёлые виджеты в динамический импорт, например карту или чат-виджет, которые подключаются после run основного контента. Картинки переводите на next/image с lazy loading — это заметно улучшает LCP.
5. Шаг 6. Наполнение и внутренняя перелинковка
6. Внутренние ссылки лучше проектировать вместе с шаблонами, а не «по ходу». Блоки «Похожие статьи», «Другие услуги», «С этим часто заказывают» должны быть частью React-компонентной библиотеки, а не ручной версткой на каждой page.
7. Контент-план строится кластерами: под один кластер запросов — группа статей и одна главная посадочная. Тогда внутренняя перелинковка появляется естественно: статьи ссылаются на посадочную и друг на друга. Технически Next.js не ограничивает вас в перелинковке, но от того, как вы спроектируете компоненты и props, зависит, насколько легко будет поддерживать систему через год, когда в проекте уже сотни материалов.

Тонкие настройки: чем отличается просто сайт на Next.js от реально SEO-оптимизированного

Два сайта могут быть собраны одинаковой командой, через один и тот же create-шаблон и команды npm run build / npm run start, но вести себя в выдаче по-разному.

• Вариант А: базовые meta, нет sitemap, robots по умолчанию, заголовки H1–H3 расставлены хаотично, служебные page в индексе, фильтры дублируют контент.
• Вариант Б: продуманные шаблоны, строгая иерархия заголовков, уникальные <title> и description, структурированные данные, чистые URL без мусорных параметров, тонкая настройка роутинга и редиректов.

При проверке обратите внимание:

• есть ли уникальные title и description у всех ключевых URL, особенно у home, услуг, категорий и топовых статей;
• корректно ли настроены sitemap.xml, robots.txt и hreflang, если сайт многоязычный;
• что показывает Lighthouse и Core Web Vitals (LCP, CLS, INP): Next.js позволяет агрессивно оптимизировать картинки и выносить лишний javascript из критического пути, но это нужно осознанно включать.

Список доработок, которые часто забывают даже опытные разработчики: закрыть от индексации страницы поиска, авторизации и личного кабинета; избежать бесконечных параметров фильтров в индексе; настроить 301-редиректы после изменения структуры pages, чтобы не терять вес на 404. Эти «мелочи» часто дают больше эффекта, чем ещё одна статья в блоге.

Готов ли сайт к запуску: чек-лист и когда имеет смысл передать работу команде

Перед первым релизом пройдитесь по короткому чек-листу:

• структура сайта соответствует карте запросов и бизнес-целям, а не только логике фронтенда;
• у всех важных страниц есть уникальные заголовки, описания и корректные H1;
• настроены sitemap, robots и базовая структурированная разметка (Article, FAQ, Product, где нужно);
• проверены ключевые метрики скорости и отображение на мобильных;
• ни одна важная page не скрыта от индексации по ошибке и не дублируется десятком URL.

Спросите себя: понимаете ли вы, почему именно так выбраны режимы рендеринга? Сможете ли без боли добавить новый раздел через год, не ломая старые маршруты и не потеряв позиции? Если в проекте появляются сложные интеграции, интернет-магазин, несколько языков, CRM или нетривиальная логика личного кабинета, имеет смысл привлечь команду, которая умеет не только собирать Next.js-app, но и выстраивать SEO-архитектуру: от api до шаблонов. Мы как раз в таком формате работаем с проектами — помогаем создать и запустить сайт на Next.js так, чтобы технический фундамент не ограничивал рост органического трафика.