Главная / Статьи / Создание повторно используемых шаблонов стартера Next.js для избежания шаблонного кода

Next.jsTypeScriptTailwindCSSDeveloper ToolsWeb Development

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

Узнайте, как разработчик заменил повторяющуюся процедуру очистки в Next.js на набор всё более полных стартовых шаблонов для магазинов, витрин и лендинг-страниц.

972 слов

Каждый разработчик, работавший с Next.js, проходил через именно этот ритуал.

Вы пишете:

npx create-next-app

…и вдруг оказываетесь перед огромной, блестящей страницей входа Vercel.

Она выглядит потрясающе: чистая, современная и явно созданная для впечатления.

Проблема в том, что как только вы готовы создать что-то реальное, именно эта страница входа становится первым элементом, который вы удаляете. Почти два года каждый раз при начале нового проекта повторялась одна и та же последовательность действий:

  • удалить страницу входа
  • удалить примерные компоненты
  • удалить примерную стилизацию
  • удалить примерные маршруты API
  • удалить примерные шрифты
  • удалить примерную структуру
  • удалить примерные метаданные

И так снова и снова, проект за проектом.

В какой-то момент повторение этих действий перестало казаться разумным.

Именно это разочарование побудило меня создать собственный стартовый шаблон.

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

Вот как происходила эта эволюция.

Настоящая проблема: показная стартовая точка, а не минималистичная

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

Сразу после установки вы получаете:

  • полную лендинг-страницу в стиле маркетинга
  • эффекты анимации
  • градиентные фоны
  • образцы маршрутов
  • образцы компонентов
  • образцы стилей
  • образцы метаданных
  • образцы шрифтов

Это действительно полезно, если вы только начинаете работать с этой фреймворк-системой. Но если вы уже знаете, что делаете, и вам просто нужна минимальная отправная точка, это становится помехой.

Целью было что-то гораздо проще:

  • нет лишнего визуального шума
  • нет демонстрационного интерфейса
  • нет маршрутов-заглушек
  • нет файлов, которые не нужны
  • полностью пустая основа, готовая к разработке

Именно такой вариант и был создан.

Первый предустановленный вариант: Минимальная отправная точка

Это была первая попытка.

Компактный, современный стартовый проект Next.js с следующими особенностями:

  • актуальные версии зависимостей
  • интеграция с TailwindCSS
  • TypeScript 6.0.3 (стабильная версия)
  • стандартная структура папок App Router
  • абсолютно нет демонстрационных компонентов
  • нет лишних элементов на странице загрузки, которые нужно удалять

Он полностью соответствовал тому, что действительно требовалось для ежедневной настройки проекта.

Очень быстро стало ясно, что другие разработчики, вероятно, сталкиваются с той же проблемой.

Вторая настройка: отправная точка для витрины магазина

После использования минимальной настройки возникла потребность в варианте с более строгой структурой, подходящем для:

  • страниц каталога товаров
  • макетов витрин магазина
  • прототипов электронной коммерции
  • обычных приложений полного стека

Это привело к созданию второй настройки, включающей:

  • чистый интерфейс
  • макет в виде сетки товаров
  • базовую структуру фильтрации
  • основу для добавления базы данных и системы аутентификации
  • современные компоненты интерфейса
  • ту же стабильную версию TypeScript

Это не полноценное решение для электронной коммерции — лишь прочная отправная точка.

Третья настройка: шаблон страницы-лендинга товара

Затем появилось ещё одно осознание:

Большинство разработчиков предпочитают не создавать лендинг-страницу с нуля каждый раз.

Поэтому была добавлена третья готовая настройка, предлагающая:

  • чистый раздел с главным изображением
  • место для выделения продукта
  • блок с призывом к действию
  • адаптивную компоновку
  • минимальные требования к настройке
  • простую возможность кастомизации

Она хорошо подходит для:

  • продуктов типа SaaS
  • страниц запуска
  • маркетинговых сайтов
  • простых презентаций проектов

На этом этапе существовало три готовые настройки, каждая из которых решала отдельную практическую задачу.

Почему в качестве стандарта был выбран TypeScript 6.0.3

Next.js 16 достиг стабильной версии, но TypeScript 7 ещё не полностью внедрен во всей экосистеме.

Такие детали, как декораторы, поведение при генерации вывода и решение проблем с модулями, всё ещё находятся в стадии улучшения в различных инструментах.

Учитывая это, было установлено простое руководящее правило:

Каждый предустановленный набор использует TypeScript 6.0.3 — стабильную версию TS6 — до тех пор, пока Vercel не подтвердит полную совместимость с TypeScript 7.

Это решение обеспечивает предсказуемость предустановленных наборов, их надёжность и удобство использования для новичков.

Непланируемый результат: развивающаяся экосистема

Никогда не было намерения создавать целую семью шаблонов, одновременно поддерживать несколько стартовых наборов или писать документацию к какому-либо из них.

Но когда появились:

  • минимальный стартовый набор
  • стартовый набор для интернет-магазина
  • стартовый набор для лендинг-страницы

…стало очевидно, что это превратилось во что-то более значимое.

Формировалась небольшая экосистема современных, без излишеств стартовых проектов для Next.js.

Именно такие ресурсы были бы полезны гораздо раньше.

Перспективы

План — постепенно продолжать её расширять, добавляя такие элементы, как:

  • улучшенная документация
  • развертывание живых демо-версий
  • дополнительные настройки по умолчанию
  • возможно, инструмент командной строки
  • возможно, публикация на рынке шаблонов

Ничего из этого не является срочным — просто постепенный прогресс со временем.

Всё это началось не с желания стать администратором шаблонов. Всё началось просто потому, что постоянное удаление одной и той же страницы входа на Vercel стало утомительным. Часто самые полезные инструменты появляются при решении собственных постоянных проблем.

Если вы разработчик Next.js и ищете:

  • чистую структуру проекта
  • актуальные зависимости
  • стабильная настройка TypeScript
  • минимум лишних элементов
  • быстрый способ начала работы

    • эти предустановки могут сэкономить вам столько же времени, сколько уже было сэкономлено при их создании.

    https://github.com/vedanshshetti/nextjs-preset

    Связанная литература

    Все статьиПрислать бриф