Tworzenie wielokrotnie używalnych szablonów startowych dla Next.js, aby uniknąć kodu szablonowego

Każdy programista, który pracował z Next.js, przechodził przez ten dokładnie taki sam proces.

Piszesz:

npx create-next-app

…i nagle patrzysz na tę ogromną, błyszczącą stronę startową Vercel.

Wygląda fantastycznie – jest czysta, nowoczesna i wyraźnie ma na celu zaimponowanie.

Problem polega na tym, że w momencie, gdy jesteś gotów zbudować coś prawdziwego, ta sama strona startowa staje się pierwszą rzeczą, którą usuwasz. Przez prawie dwa lata za każdym razem, gdy rozpoczynał się nowy projekt, powtarzała się ta sama sekwencja:

• usunąć stronę startową
• usunąć przykładowe komponenty
• usunąć przykładowe stylizacje
• usunąć przykładowe trasy API
• usunąć przykładowe czcionki
• usunąć przykładowy układ
• usunąć przykładowe metadane

Raz po raz, projekt za projektem.

W pewnym momencie powtarzanie tego zadania przestało wydawać się sensowne.

To właśnie to rozczarowanie skłoniło mnie do stworzenia osobistego szablonu startowego.

To, co zaczęło się jako jeden lekki preset, stopniowo rozwinęło się w dwa, potem trzy, a teraz przekształca się w małą kolekcję czystych, aktualnych punktów wyjścia dla Next.js.

Oto jak doszło do tej ewolucji.

Prawdziwy problem: efektowny start, a nie minimalny

Sam Next.js jest doskonały, ale jego domyślna struktura została stworzona po to, by pokazać możliwości narzędzia, a nie aby dać pustą płaszczyznę do tworzenia.

Od razu otrzymujemy:

• pełną stronę startową w stylu marketingowym
• efekty animacyjne
• tła gradientowe
• przykładowe trasy
• przykładowe komponenty
• przykładowe style
• przykładowe metadane
• przykładowe czcionki

To jest naprawdę przydatne, jeśli jesteś początkującym w tym frameworku. Ale jeśli już wiesz, co robisz i chcesz tylko prostego punktu wyjścia, to staje się przeszkodą.

Cel był znacznie prostszy:

• brak dodatkowego wizualnego hałasu
• brak interfejsu demonstracyjnego
• brak tras zastępczych
• brak plików, których nie potrzebujesz
• naprawdę pusta baza gotowa do tworzenia

I tak właśnie zostało to zbudowane.

Pierwszy preset: Najprostszy punkt wyjścia

To była początkowa próba.

Kompaktowy, nowoczesny starter Next.js zawierający:

• aktualne wersje zależności
• integrację z TailwindCSS
• TypeScript 6.0.3 (stabilna wersja)
• standardową strukturę folderów App Router
• brak żadnych komponentów demonstracyjnych
• brak zbędnych elementów na stronie głównej do usunięcia

Odpowiadał to temu, co faktycznie było potrzebne do codziennej konfiguracji projektu.

Bardzo szybko stało się również jasne, że inni programiści prawdopodobnie borykają się z tym samym problemem.

Drugi preset: punkt wyjścia dla witryny sklepowej

Gdy już miało się minimalne preset, następnym pragnieniem było coś z nieco większą strukturą wbudowaną — odpowiednie do:

• stron katalogu produktów
• układów witryny sklepowej
• prototypów e-commerce
• ogólnych aplikacji full-stack

To doprowadziło do stworzenia drugiego presetu, który obejmuje:

• czysty interfejs
• układ w formie siatki produktów
• prostą strukturę filtrowania
• podstawy gotowe do dodania bazy danych i mechanizmów autoryzacji
• współczesne komponenty interfejsu użytkownika
• tę samą stabilną wersję TypeScript

Nie ma on na celu bycia kompletnym rozwiązaniem e-commerce — jest jedynie solidną podstawą do dalszej pracy.

Trzeci preset: szablon strony głównej produktu

Następnie pojawiło się kolejne uświadomienie:

Większość programistów woli nie budować strony startowej od zera za każdym razem.

Dlatego pojawił się trzeci preset, oferujący:

• czystą sekcję główną
• miejsce na wyróżnienie produktu
• blok wezwania do działania
• layout responsywny
• minimalne wymagania co do konfiguracji
• proste dostosowywanie

Dobrze pasuje do:

• produktów SaaS
• stron startowych
• stron marketingowych
• prostych prezentacji projektów

W tym momencie istniały trzy presety, z których każdy odpowiadał na inną praktyczną potrzebę.

Dlaczego jako standard wybrano TypeScript 6.0.3

Next.js 16 osiągnął stabilną wersję, ale TypeScript 7 jeszcze nie w pełni dotarł do całego ekosystemu.

Detale takie jak dekoratory, zachowanie emisji oraz rozwiązywanie problemów z modułami są nadal dopracowywane w różnych narzędziach.

Z tego powodu ustalono prostą zasadę:

Każdy preset używa TypeScript 6.0.3, stabilnej wersji TS6, dopóki Vercel nie potwierdzi pełnej kompatybilności z TypeScript 7.

To rozwiązanie zapewnia przewidywalność presetów, ich niezawodność oraz ułatwia korzystanie z nich osobom początkującym.

Nieplanowany skutek: rozwijający się ekosystem

Nigdy nie było zamiaru stworzenia całej rodziny szablonów, utrzymywania kilku wersji starterów jednocześnie ani pisania dokumentacji do którychkolwiek z nich.

Jednak gdy już tak się stało:

• minimalny starter
• starter do sklepu internetowego
• starter do strony startowej

…stało się oczywiste, że przekształciło się to w coś znacznie bardziej rozbudowanego.

Zaczął kształtować się mały ekosystem nowoczesnych, niezagraconych punktów wyjścia dla Next.js.

Dokładnie taki zasób, który mógłby być przydatny znacznie wcześniej.

Wzrok w przyszłość

Plan polega na stopniowym rozszerzaniu tego zasobu, przy pomocy takich pomysłów jak:

• lepsza dokumentacja
• wdrożenia żywych demonstracji
• dodatkowe ustawienia domyślne
• możliwie narzędzie CLI
• możliwe zgłoszenie na rynek szablonów

Nic z tego nie jest pilne — po prostu stopniowy postęp z biegiem czasu.

Podsumowanie

Nic z tego nie zaczęło się jako próba zostania administratorem szablonów. Zaczęło się po prostu dlatego, że ciągłe usuwanie tej samej strony startowej na Vercel stało się męczące. Często najbardziej przydatne narzędzia powstają w wyniku rozwiązywania własnych, powtarzających się problemów.

Jeśli jesteś deweloperem Next.js i szukasz:

• czystej struktury projektu
• aktualnych zależności

stabilne środowisko TypeScript

minimalna ilość zbędnych elementów

szybki sposób na rozpoczęcie pracy

Te ustawienia wstępne mogą zaoszczędzić ci tyle samo czasu, ile już zaoszczędziły podczas swojego tworzenia.

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

Powiązane materiały

• Budowanie wydolnej strony detalu filmu z użyciem Next.js App Router — Dowiedz się, jak poprawnie pobierać i przechowywać dane z API OMDB w Next.js App Router przy użyciu asynchronicznych komponentów serwerowych, parametrów awaited oraz prawidłowego obsługi błędu 404.
• Lekcje z wdrażania SaaS na bazie Next.js oraz tworzenia narzędzia CLI — Wyjaśnia podstawowe decyzje dotyczące wyboru technologii, autoryzacji, modelu wielu użytkowników, systemu fakturowania i zarządzania stanem — a także proces tworzenia narzędzia CLI, które ułatwia konfigurację projektów Next.js.
• Konfiguracja Prisma 7 w projekcie Next.js 16 z TypeScript — Dowiedz się, jak zainstalować, skonfigurować i przenieść Prisma 7 wraz z PostgreSQL do aplikacji Next.js 16, a następnie stworzyć klienta typu singleton, aby uniknąć wycieków połączeń.