Bir müstəqil tərtibatçı, Next.js 15 və Tailwind v4 texnologiyalarından istifadə edərək iki şablon hazırlayıb – SaaS açılış səhifəsi və tərtibatçı portfelio. Maraqlıdır ki, o, heç bir əlavə asılılıq (dependency) istifadə etməyib: nə ikon kitabxanası, nə animasiya kitabxanası, nə də UI dəstləri. Bunun əvəzinə hər şeyi saf CSS, inline SVG və bir neçə sətir JSX ilə yazıb.
Nə istifadə olunub?
- İkonlar – inline SVG komponentləri. Hər ikon təxminən 10 sətir kod. Açılış səhifəsi üçün 15 ikon kifayət edir.
- Animasiyalar – saf CSS. Scroll-blur navbarlar, gradient parıltılar, yazı yazan terminal effekti – hamısı keyframes və transition ilə işləyir. Framer Motion kimi kitabxanalara ehtiyac yoxdur.
- Dashboard mockup – təmiz CSS. Div, border və gradientlərlə hazırlanmış ~80 sətir JSX, çəkisi demək olar sıfır.
Nəticədə hər iki şablonun ilk yükləmə JavaScript həcmi ~100KB, npm install bir neçə saniyə çəkir və Next.js 16 çıxanda heç bir uyğunsuzluq problemi olmayacaq.
Məzmun idarəsi: tək fayl, sıfır qarışıqlıq
Şablonların ən diqqətçəkən cəhəti odur ki, bütün məzmun (başlıqlar, naviqasiya, qiymət cədvəlləri, testimoniallar, layihə siyahıları, hətta terminal animasiyasındakı sətirlər) tək bir faylda saxlanılır – lib/content.ts (açılış səhifəsi üçün) və site.config.ts (portfelio üçün). Komponentlər isə yalnız bu konfiqurasiyadan məlumat alır, yəni sadəcə render edir.
Bu yanaşmanın iki üstünlüyü var: birincisi, TypeScript məzmunu yoxlayan bir lint'ə çevrilir. Alt mətn unudulubsa, link səhv yazılıbsa, qiymət cədvəlində xüsusiyyət sayı tipə uyğun gəlmirsə – kompilyasiya uğursuz olur. İkincisi, komponentlər daha təmiz və təkrar istifadəyə yararlı olur.
Tailwind v4: konfiqurasiya faylı yox, CSS dəyişənləri
Tailwind v4'də ən böyük dəyişiklik tailwind.config.js-in aradan qalxmasıdır. İndi temanın rəngləri, şriftləri və digər dəyişənləri birbaşa CSS-də @theme bloku ilə təyin edilir. Məsələn:
@import "tailwindcss"; @theme { --color-accent: oklch(0.72 0.15 260); --font-sans: "Inter", sans-serif; }Bu dəyişənlər həm CSS-də, həm də runtime'da istifadə oluna bilir. Həmçinin v4, HTML fayllarını skan edərək sinifləri avtomatik aşkarlayır – ayrıca content konfiqurasiyasına ehtiyac qalmır.
Marketinq təcrübəsi: sıfır auditoriya, ilk həftə
Müəllifin Twitter, LinkedIn və ya newsletter abunəçisi yoxdur. Buna baxmayaraq, ilk həftədə şablonları Vercel'in pulsuz tierində canlı demo kimi yayımlayıb, “Built At Lightspeed” və “Statichunt” kataloqlarına təqdim edib. Reddit'də isə 0 günlük hesabla link paylaşmağın avtomatik filtrə düşdüyünü qeyd edir – əvvəlcə komment karma yığmaq lazımdır. Hələ heç bir satış olmayıb, müəllif nəticələri toplayıb ayrıca yazı paylaşacağını bildirir.
Yenə də, bu yazıdakı fikirlər – sıfır asılılıq, tək faylda məzmun, @theme istifadəsi – hər kəsin öz layihəsində pulsuz tətbiq edə biləcəyi ideyalardır. Şablonların demo versiyalarına Nova (SaaS) və Devfolio (portfelio) ünvanlarından baxmaq olar.
