Створення повторно використовуваних шаблонів старту для Next.js, щоб уникнути базового коду

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

Ви вводите:

npx create-next-app

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

Вона виглядає чудово — чиста, сучасна та явно створена для враження.

Проблема в тому, що як тільки ви готові створити щось справжнє, ця сама сторінка приземлення стає першим елементом, який ви видаляєте. Майже два роки щоразу, коли починався новий проект, повторювалася знайома послідовність дій:

• видалити сторінку приземлення
• видалити зразкові компоненти
• видалити зразкове форматування
• видалити зразкові маршрути API
• видалити зразкові шрифти
• видалити зразкову структуру
• видалити зразкові метадані

Знову та знову, проект за проектом.

У певний момент повторення цієї рутини перестало здаватися доцільним.

Саме це розчарування спонукало мене створити власний початковий шаблон.

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

Ось як відбувалася ця еволюція.

Справжня проблема: пишний початок, а не мінімалістичний

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

Вже з самого початку ви отримуєте:

• повну сторінку-лендінг у стилі маркетингу
• анімаційні ефекти
• градієнтні фони
• зразкові маршрути
• зразкові компоненти
• зразкові стилі
• зразкові метадані
• зразкові шрифти

Це справді корисно, якщо ви новачок у цьому фреймворку. Але якщо ви вже знаєте, що робите, і просто хочете базову початкову точку, це стає перешкодою.

Метою було щось набагато простіше:

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

Ось що і було створено.

Перший налаштування: Мінімальний стартовий набір

Це була початкова спроба.

Компактний, сучасний стартовий набір Next.js з наступними функціями:

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

Це відповідало тому, що насправді було потрібно для щоденного налаштування проекту.

Досить швидко стало зрозуміло, що інші розробники, ймовірно, стикаються з тими самими проблемами.

Другий налаштування: вихідна точка для інтернет-магазину

За наявності мінімальних налаштувань наступною потребою було щось із більшою кількістю вбудованої структури — підходяще для:

• сторінок каталогу продуктів
• макетів інтернет-магазину
• прототипів електронної комерції
• загальних застосунків типу full-stack

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

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

Це не є повним рішенням для електронної комерції — лише міцна вихідна основа.

Третє налаштування: шаблон сторінки-лендінгу продукту

Далі з’явилося ще одне усвідомлення:

Більшість розробників воліють не створювати сторінку приземлення з нуля щоразу.

Тож з’явився третій готовий варіант, який пропонує:

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

Він ідеально підходить для:

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

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

Чому TypeScript 6.0.3 було обрано як стандарт

Next.js 16 вже досяг стабільної версії, але TypeScript 7 ще не повністю поширився в усій екосистемі.

Деталі, такі як декоратори, поведінка емітування та вирішення проблем з модулями, все ще опрацьовуються в різних інструментах.

З огляду на це було встановлено просте керівництво:

Кожен пресет використовує 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, параметрів await та належного оброблення помилок 404.
• Уроки з розгортання SaaS на Next.js та створення CLI-інструменту — Пояснює основні рішення, пов’язані з вибором технологій, автентифікацією, мульти-термінатністю, обліком та керуванням станом, а також процес створення CLI-інструменту для спрощення налаштування проектів Next.js.
• Налаштування Prisma 7 у проекті Next.js 16 на TypeScript — Дізнайтеся, як встановити, налаштувати та мігрувати Prisma 7 з PostgreSQL у додатку Next.js 16, а також як створити синглтонний клієнт для уникнення витоків з’єднань.