Стварэнне падзейлівых шаблонаў-стартапаў для Next.js, каб ухіліцца ад базовага коду

Кожны разработчык, які працавалі з Next.js, перажыў гэты самы ритуал.

Вы пішаце:

npx create-next-app

…і раптам вы дывіцеся на тую вялічзюю, бляскучую стартовую сторанцу Vercel.

Яна выглядае чудова: чыстая, савременная і явна прызначаная для вражэння.

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

• адмаўліць стартовую сторанцу
• адмаўліць прыкладныя компоненты
• адмаўліць прыкладны стайлінг
• адмаўліць прыкладныя маршруты API
• адмаўліць прыкладныя шрыфты
• адмаўліць прыкладную структуру
• адмаўліць прыкладную мета-інфармацыю

Паўтараючыся знову і зноў, проект за проектам.

У певны момент такая рутына перестала здавацца разумной.

Самэ гэтае разчароўванне стала прычыной створэння персональнага шаблону-прыемніка.

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

Ось як адбылася гэтае эвалюцыя.

Аслівныя проблемы: яскравы пачатак, а не мінімалістычны

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

З самага пачатку вы отрымліваете:

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

Гэта сапраўды корыстна, якщо вы новачак у гэтым фреймворку. Але якщо вы вяснілі, што робіце, і проста хочаце базовую падставу, гэта становіцца на пераказе.

Мета была значна простейшая:

• ніякога дадатковага візуальнага шуму
• ніякай дэмавайной інтарфейсу
• ніякіх месцаў для замены
• ніякіх файлоў, якія не патрэбны
• сапраўдна порожняя, гатовая да стварэння база

І самэ гэта і было створана.

Першы настрой: Мінімалістычны стартавы пакет

Гэта была першая спроба.

Компактны, савременны стартавы пакет Next.js, які включае:

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

Гэта адпавядала таму, што на самай працы было патрэбна для налагоджэння проекта ў повсякдзеннай працы.

Дзеўальна было і тое, што даскочна быстра стала зрозумелая справа, што іншыя разработчыкі, верагодна, сталкваліся з тым самым проблемам.

Второй настрой: пункт выйска для вітрины

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

• сторонік каталогу продуктав
• макетаў вітрины
• праймэтав электронной торгавлі
• звычайных застосоў усіх слоёў

Гэта прывела да стварэння второга настрой, які включае:

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

Гэты настрой не прызначаны як завершаная сістэма для электронной торгавлі — толькі моцная падстава для запуску.

Трэці настрой: шаблон сторонікі-прыземлення для продукту

Пасля гэтага з’явілася ўсвядомленне:

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

Таму была створана трэцяя прадзефармаваная настройка, якая прысвячалася:

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

Ўсё гэта чырпаецься для:

• продуктав SaaS
• сторанак запуску
• сайтаў маркетынгу
• простых прэставленняя проектаў

На гэты момент існавалі тры прадзефармаваныя настройкі, кожная з яых рашала аднаццае практычнае запатранне.

Чаму як стандарт быў выбран TypeScript 6.0.3

Next.js 16 досяг стабільнай версіі, але TypeScript 7 ўсё яшчэ не запоўніў усе аспекты экасистемы.

Даклэ, такія аспекты як декоратары, працэўнасць функцыі emit і рашэнне па модулях яшчэ працоўна выправляюцца ў разных інструментах.

З усім гэтым была задана простая напамінка:

Кожны прадзефалт выкарыстоўвае TypeScript 6.0.3, стабільную версію TS6, пакуль Vercel не паўтарыць падтрымку TypeScript 7.

Гэтае рашэнне дапамагае прадзефалтам заставацца прыемнымі, надзеянымі і зрозумелымі для новачакоў.

Непланаваны наследак: растучая экасістэма

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

Але калі ўжо з’явіліся:

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

…стала ясная рэч, што гэта ператворылася на ўсё бол значны элемент.

З’явілася невелика экасыстэма сучасных, без зайвых элементаў пунктав запуску Next.js.

Гэта самэ тое рысурс, які мог бы стаць корыстным ўжо давно.

Перспективы

План — паступова расширваць яго, пры чым є такія ідеі:

• падтрымкі лепшай дакументацыі
• розмешчэнне жывых дэманаў
• дадатковыя настройкі
• возможна інструмент CLI
• возможна падача на рынак шаблонаў

Нічага з гэтага ня ўскоранае — толькі поступовы прагрэс з часам.

Заключныя мыслі

Усё гэта не пачалося як спроба стаць адпаведальным за шаблоны. Усё пачалося проста таму, што постаўленне той самай стартовай стораніцы Vercel знова і знова стала надтая. Часта самыя корыстныя інструменты з’яўляюцца пасля рашэння власных постаўленых проблем.

Якщо вы развіцел Next.js, які шукае:

• чыстую структуру проекта
• актуальныя залежнасці

Стабільна настройка TypeScript

Мінімум зайвага

Шырока дорага да часу для пачатку работы

Этыя настройкі могу заўсёды захаваць ваш час, як і ўжо заўсёды захавалі падчас свайго стварэння.

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

Спадні матэрыялы

• Стварэнне стойкай сторонкі дакладнаў пра фільмы з Next.js App Router — Дазнаецеся, як правільна запрашваць і кэшаваць даныя API OMDB у Next.js App Router за дапамогою асінхронных Server Components, параметраў awaited і рэальнага адпаведзення на 404.
• Урокі з розповсюджэння SaaS на базе Next.js і стварэння CLI для падтрымкі проектаў — Інформуе пра ключовыя рашэнні: выбор тэхналогій, аутентыкацыя, мульти-тэнанты, білінг і калектывнае кераванне станам, а таксама пра стварэння CLI, якае спрыяе аптымізацыі наладкі проектаў Next.js.
• Наладка Prisma 7 у проекте Next.js 16 на TypeScript — Навучыцеся інсталювацыі, наладкі та міграцыі Prisma 7 з PostgreSQL у прыемліке Next.js 16, а таксама стварэнню кліента-сінглтону, каб ужо не было выцэканняя з’ўязкаў.