Aşamalı geçiş
Next.js bilginizi çöpe atmayın.
Kullandığınız kavramların çoğunun burada daha küçük bir karşılığı var. Trafik akmaya devam ederken sayfaları birer birer taşıyın.
| Next.js | JSkelet |
|---|---|
| app/page.tsx | Bir route kaydı ve bir EJS sayfa şablonu |
| generateMetadata() | Controller'ın döndürdüğü metadata alanı |
| layout.tsx | Layout şablonu ve bir layout bağlamı hook'u |
| not-found.tsx | Config içindeki notFound hook'u |
| redirect() / notFound() | Aynı adlar, jskelet'ten import edilir |
| next.config redirects/rewrites/headers | jskelet.config.mjs içinde aynı sözdizimi |
| export const revalidate = 60 | Route üzerinde bir revalidate seçeneği |
| React client component | Bir island elementi ve bir mount fonksiyonu |
| Suspense ile ertelenen bölüm | İstek üzerine render edilen bir fragment ucu |
| next/image, next/link | image() ve link() yardımcıları (isteğe bağlı remote optimize dahil) |
| opengraph-image / ImageResponse | ogImage / ogHandler / ImageResponse (sharp varsa PNG) |
| React Context / zustand | Island'lar arası küçük durum için createStore() |
Tam plan ve arkasındaki gerekçeler belgelerin taşıma bölümünde.
Güvenli rota
Önce en kolay kazanımı taşıyın.
İki uygulama ters proxy arkasında yan yana yaşayabilir. Riski küçük tutun, ölçün, sonra sıradaki sayfaya geçin.
- 01 En çok trafik alan, en az etkileşimli sayfayla başlayın — genelde bir liste ya da detay sayfası.
- 02 Layout'u ve metadata varsayılanlarınızı hook'lara taşıyın.
- 03 Client component'ları island'a indirin: çoğu bir düğme ve bir fetch'e dönüşür.
- 04 Kişiye özel bölümleri fragment uçlarına ayırıp no-store işaretleyin.
- 05 TTL'lerinizi ölçün: cache başlığı ve dev overlay'i yeterli.
- 06 Dashboard'ı olduğu yerde bırakın. O sayfalar için doğru araç bu değil.
export default {
async redirects() {
return [
{ source: "/post/:slug", destination: "/blog/:slug", permanent: true },
];
},
async cache() {
return {
html: { "/": 3600, "/blog/:slug": 300 },
prewarm: { enabled: true, max: 200, concurrency: 4 },
};
},
hooks: {
metadata() {
return { titleTemplate: "%s | Site", siteUrl: SITE_URL };
},
},
};Bozuk bir config siteyi asla düşürmez: hata veren bir hook ya da başlık kuralı uyarı basar ve varsayılana döner.
SSS
Taşırken en çok sorulanlar
Neden React yok?
Sayfaların çoğu etkileşimli değil. React'in maliyeti sabit: runtime iner, ağaç kurulur, hidrasyon çalışır — ve sonuç sunucunun zaten ürettiği HTML'in aynısı olur. JSkelet o sabit maliyeti kaldırıp etkileşimi yalnızca ihtiyacı olan elementlere veriyor.
TypeScript kullanabilir miyim?
Framework'ün kendisi düz JavaScript ve JSDoc; derleme adımı yok. Uygulama tarafında denetlenen JavaScript'i açıp aynı tip güvenliğinin çoğunu derlemesiz alabilirsiniz; .ts dosyaları için hatta kendiniz bir adım eklersiniz.
Cache süreç belleğinde: birden fazla instance'ta ne olur?
Her instance kendi L1 önbelleğini tutar, yani soğuk açılışta ısınma gerekir ve TTL sınırları kayabilir. Erken yenileme ve prewarm bu boşluğun çoğunu kapatır; isteğe bağlı Redis katmanı HTML'i paylaşır ve invalidateHtmlCache() / clearHtmlCache() çağrılarını pub/sub ile her kopyaya yayar. Nokta atışı geçersizleme her iki modelde de birinci sınıf.
Build çıktısı olmadan çalışır mı?
Evet. Manifest yoksa varlık yardımcısı hash'siz yollara döner ve layout stylesheet etiketini hiç basmaz. Build adımını atlamak hata değil, stilsiz ama çalışan bir sayfa verir.
Tailwind, sharp ve ikon seti zorunlu mu?
Hiçbiri değil. icons/ altına SVG koyun, sprite yalnızca o klasörden üretilir; yoksa @phosphor-icons/core opsiyonel peer'dır. Tailwind ve sharp yoksa adımları atlar. Bozuk config siteyi düşürmek yerine uyarır ve varsayılana döner.
HTML herkese aynıysa tema nasıl çalışıyor?
Sunucuda hiç karara bağlanmıyor. Cache'lenen HTML her ziyaretçiye birebir aynı gittiği için tema ve dil gibi kişiye özel seçimler tarayıcıda yapılır; bu sayfadaki tema düğmesi de hemen bağlanan bir island. Birden fazla host'ta kısa bir oturum id'si gerekiyorsa paylaşımlı cookie'ler ayrı, isteğe bağlı bir yol.