Nextjs v14 Tutorial — Routing
Routing Yapısı ve Temel Özellikleri
Nextjs v14, dosya sistemi tabanlı bir routing mekanizmasına sahiptir. URL yolları, kod tabanındaki dosya ve klasörler tarafından belirlenir. Örneğin, src/app klasörü içinde bir page.jsx dosyası oluşturarak localhost:3000 için bir rota yaratabilirsiniz. Ayrıca, src/app/about ve src/app/profile klasörleri içinde benzer yapılar oluşturarak /about ve /profile yolları için sayfalar hazırlayabilirsiniz. Nested (iç içe) rota desteği de mevcuttur. src/app/blog klasörü içindeki page.jsx dosyası localhost:3000/blog yoluna karşılık gelir.
Dinamik Routing ve Route Handlers
Nextjs, karmaşık uygulamalar için dinamik routingi destekler. Örneğin, src/app/products içinde page.jsx dosyası oluşturarak dinamik ürün listeleme sayfaları yapabilirsiniz. Ayrıca, Route Handlers, belirli route için özel istek yöneticilerini yönetmenize olanak tanır ve çeşitli HTTP yöntemlerini destekler. Bu handlerlar, route.js dosyaları içinde tanımlanabilir ve NextRequest ve NextResponse API’ları ile geliştirilmiş istek ve yanıt işlevsellikleri sunar.
Gelişmiş Kullanıcı Deneyimi ve Performans Optimizasyonu
Nextjs v14, geliştiricilere daha dinamik ve interaktif web uygulamaları oluşturma imkanı sunar. Dinamik sayfalar, kullanıcı etkileşimlerine dayalı olarak içerik yükleyebilir ve bu da kullanıcı deneyimini zenginleştirir. Performans optimizasyonu için, uygulamaların ölçeklenebilirlik için yapılandırılması ve rotaların verimli yönetimi önemlidir.
Proje Yapısı ve API Yolları
Nextjs projelerinde etkili organizasyon, uygulamanın ölçeklenebilirliği ve bakımı için kritik öneme sahiptir. pages dizini içindeki dosya ve klasörlerle dinamik segmentler oluşturarak esnek rotalar yaratabilirsiniz. Ayrıca, pages/api dizini içinde API yolları oluşturarak serverless fonksiyonlarını yönetebilirsiniz. Bu yollar, CRUD işlemlerini destekler ve farklı HTTP yöntemleriyle çalışabilir.
Streaming, Hata Yönetimi ve Yerleşik SEO
Nextjs v14, geleneksel Sunucu Tarafı İşleme (SSR) yerine, parça parça web sayfası gönderimi yapabilen streaming özelliğine sahiptir. Bu, sayfa içeriğinin her bir parçasının hazır olduğu anda render edilmesini sağlar. Hata bileşeni, uygulamanın en küçük bölümünde hataları sınırlandırır. Ayrıca, App Router içinde yer alan sunucu bileşenleri, sayfa yükleme hızını artırır ve performansı iyileştirir. Veri çekme için yeni bir model sunar ve SEO için yerleşik Metadata API kullanır.
Nextjs v14'ün Routing yapısını açıklamak için küçük bir kod örneği oluşturdum.
// src/pages/index.js
// Bu, ana sayfa için basit bir rota örneğidir.
function HomePage() {
return <div>Merhaba, Next.js v14'e hoş geldiniz!</div>;
}
export default HomePage;
// src/pages/about.js
// Bu, 'hakkında' sayfası için basit bir rota örneğidir.
function AboutPage() {
return <div>Hakkımda sayfasına hoş geldiniz.</div>;
}
export default AboutPage;
// src/pages/blog/[postId].js
// Bu, dinamik rota örneğidir. 'postId' URL'den alınan bir parametredir.
function BlogPost({ query }) {
return <div>Blog yazısı: {query.postId}</div>;
}
// Bu fonksiyon Nextjs tarafından her sayfa talebinde çağrılır ve
// sayfa bileşenine prop olarak 'query' nesnesini geçirir.
export async function getServerSideProps({ query }) {
return { props: { query } };
}
export default BlogPost;Yukarıdaki örnekte, Nextjs v14'te statik ve dinamik routingin nasıl kullanıldığını anlatmaya çalıştım. HomePage ve AboutPage basit statik route iken, BlogPost dinamik bir routedur ve URL’deki postId parametresine bağlı olarak içeriği değişir.
Buraya kadar okuduysanız teşekkür ederim. Elimden geldiğince sade ve anlaşılır bir şekilde anlatmaya çalıştım.Bu makaleyi yararlı bulduysanız beni sosyal medya üzerinden takip edebilirsiniz. Eğer bana bir kahve ısmarlamak isterseniz aşağıdaki linki kullanabilirsiniz.
