Nextjs projelerinde sayfalar arasında geçiş işlemlerini yönetmek için routing oldukça önemlidir Bu makalede, server-side ve client-side routing kullanarak nasıl sayfalar arasında geçiş yapabileceğiniz açıklandı Link ve Router bileşenleri kullanılarak programatik olarak sayfalar arasında geçiş yapmak da mümkündür Dinamik yönlendirmeler de Nextjs'in en önemli özelliklerinden biridir ve bu konuya da değinildi
Nextjs projelerinde sayfa dosyaları js uzantılıdır ve routing işlemleri de bu dosyalar aracılığıyla gerçekleştirilir Yerel ve global routing işlemleri yapılabilmektedir Link bileşeni, sayfa yeniden yüklenmeden diğer sayfalara erişmek için kullanılır Server-side routing, SEO dostu olması nedeniyle önemlidir Client-side routing ise sayfalar arası geçiş işlemini hızlı ve sorunsuz bir şekilde gerçekleştirmek için kullanılan bir yöntemdir
Link bileşeni, sayfa içinde farklı sayfalara geçiş yapmak için kullan

Next.js projelerinde sayfalar arası geçişlerin yönetimi için routing oldukça önemlidir. Bu makalede Next.js projelerinde nasıl routing yapılacağı, server-side ve client-side routing kullanarak nasıl sayfalar arasında geçiş yapılacağı ele alınacaktır. Ayrıca, Link ve Router bileşenleri kullanılarak programatik olarak sayfalar arasında geçiş yapmak mümkündür. Bunun yanı sıra, Next.js'in en önemli özelliklerinden biri olan dinamik yönlendirmeleri de ele alacağız. Tüm bunlarla birlikte, Next.js projesinde routing yönetimi hakkındaki yöntemleri detaylı olarak inceleyeceğiz.

Next.js Routing

Next.js projeleri, modern web uygulamaları için ideal bir yapı sunar. Bu yapı, sayfalar arası geçişlerin yönetimi için routing kullanır. Ayrıca, Next.js sayesinde sunucu tarafında gerçekleşen routing işlemleri de mümkündür. Bu bölümde, Next.js projelerinde routing konusunda bilmeniz gereken detayları ele alacağız.

Next.js projesinde, sayfa dosyaları .js uzantılıdır. Bu sayfa dosyaları, pages klasöründe yer alır. Routing işlemleri de yine bu dosyalar üzerinden gerçekleştirilir.

Next.js projelerinde yerel (local) ve global (global) routing işlemleri yapılabilmektedir. Yerel routing işlemleri, sadece proje içindeki sayfalara erişimi sağlar. Global routing işlemleri ise, harici URL'lere erişimi sağlar.

Next.js projelerinde, routing işlemi için link bileşeni kullanılmaktadır. Bu bileşen kullanıldığında, sayfa yeniden yüklenmeden diğer sayfalara erişmek mümkün olur. Link bileşeni, next/link modülü içerisinde yer alır.

• Next.js projelerinde routing kullanılması, sayfalar arasında geçiş işlemlerinin yönetimini kolaylaştırır.
• Yerel ve global routing işlemleri yapılabilmektedir.
• Routing işlemi için link bileşeni kullanılır ve bu sayede sayfa yeniden yüklenmeden diğer sayfalara erişmek mümkün olur.

Server-Side Routing

Next.js projelerinde sayfalar arasında geçiş yapmak için sunucu tarafında working olan server-side routing kullanılır. Bu işlem, kullanıcının sayfalar arasında gezinmesi sırasında arka planda gerçekleşir ve mevcut sayfa isteği işlenir.

Server-side routing ile bir sayfa yeniden yüklenebilir. Bu nedenle, bu yöntem sayfa geçişleri sırasında daha fazla işlem yükü oluştursa da, kullanıcılara daha hızlı sayfa yükleme sağlar.

Server-side routing, getInitialProps () metodunu kullanarak kullanıcı ve tarayıcı bilgilerini sağlar. Sunucu tarafında çalıştığı için, istemci tarafından sadece veriler değiştiğinde sayfa yeniden yüklemek yerine, sunucu tarafında aktarılabilir. Bu sayede kullanıcılar hızlı sayfa yükleme süresi elde ederler.

Server tarafını kullanarak sayfa geçişleri yapmak için, link etiketi yerine Next.js'in Link bileşenini kullanarak yapılabilir. Next.js, programatik yönlendirme için Router bileşeni sağlar ve yüksek performans sağlar.

En son olarak, server-side routing'in en önemli avantajlarından biri, SEO dostu olmasıdır. Arama motorları, sayfaların içeriğine ve yalnızca istenilen bölümlerinin geçici olarak işlenmesine izin veren server-side routing kullanmaktadır.

Client-Side Routing

Client-side routing, Next.js projelerinde, sayfalar arası geçişlerin sunucu tarafından değil, işlemci tarafından yönetilmesidir. Bu sayede sayfalar arası geçişler daha hızlı ve daha sorunsuz bir şekilde gerçekleşir.

Next.js içerisinde, client-side routing işlemi, sayfanın aktif olduğu an çalışmaktadır. Yani sayfa yüklendiği zaman, tarayıcı üzerindeki işlemci tarafından çalışır. Bu bölümde client-side routing kullanarak sayfalar arası geçiş nasıl yapılacağı incelenecektir.

Client-side routing kullanarak sayfalar arası geçiş yapmak için Next.js içerisindeki Router bileşeni kullanılır. Bu bileşen, sayfalar arası geçiş işlemini hızlı ve sorunsuz bir şekilde gerçekleştirmek için tasarlanmıştır. Router bileşeni içerisindeki push() fonksiyonunu kullanarak, hedef sayfaya geçiş yapabilirsiniz.

Örnek olarak, bir navigation menüsü oluşturduk ve içindeki linklere tıklandığında Router bileşeni kullanarak farklı sayfalara geçiş yaptık:

 <ul>    <li>        <Link href="/ana-sayfa">            <a>Ana Sayfa</a>        </Link>    </li>    <li>        <Link href="/blog">            <a>Blog</a>        </Link>    </li></ul>

Yukarıdaki örnekte, Link bileşeni kullanılarak sayfa içinde farklı sayfalara geçiş yapılabiliyor. Hedef sayfanın URL'si href özelliği ile belirtiliyor. Router bileşeni kullanılıp push() fonksiyonu çağrılarak da sayfa içinde programatik olarak sayfalar arası geçiş işlemi gerçekleştirilebilir.

Client-side routing, sayfalar arası geçiş işlemi için hızlı ve sorunsuz bir yöntem sunar. Next.js içerisindeki Router bileşeni kullanılarak, farklı sayfalara geçiş işlemleri kolayca yapılabilmektedir.

Link Component Kullanarak Routing

Next.js projelerinde sayfalar arasında geçiş yapmak için kullanılan Link bileşeni, basit bir navigasyon bileşenidir. Bu bileşen sayesinde, sayfa yeniden yüklenmeden diğer sayfalara erişmek mümkündür. Link bileşeni, href özelliği ile sayfanın yönlendirileceği URL'yi alır ve sayfa içindeki bir bileşen olarak kullanılabilir.

Link bileşeninin kullanımı oldukça kolaydır. İlgili bileşene tıklanması ile birlikte, ilgili sayfaya anında geçiş yapılabilir. Bu bileşen, sayfalar arasında geçiş yapmak için en pratik ve hızlı yöntemlerden biridir.

Aşağıdaki örnekte, bir Link bileşeni kullanarak sayfalar arasında geçiş yapmak nasıl yapılacağına dair detaylar verilmiştir:

import Link from 'next/link'export default function Home() {  return (    <div>      <Link href="/about">About</Link>    </div>  )}

Yukarıdaki örnekte, Link bileşeni kullanılarak about sayfasına yönlendirme yapılır. About sayfası örneği, projenize göre farklılık gösterebilir. Fakat, Link bileşeni kullanımı her zaman aynıdır.

Bu şekilde kullanılan Link bileşeni, sayfalar arasında geçiş yapmak için en kolay ve hızlı yöntemdir. Bu bileşen, projelerinize esneklik ve hız kazandıracaktır.

Programatik Olarak Routing

Next.js projelerinde programatik olarak sayfalar arasında geçiş yapmak için Router bileşeni kullanılabilir. Bu bileşen, sayfalar arasındaki geçişi yönetir ve sayfa yenileme işlemleri yapmadan hızlı bir şekilde erişim sağlar. Programatik olarak routing kullanarak sayfalar arasındaki geçiş işlemleri yapmak oldukça kolaydır.

Öncelikle, Router bileşenini sayfaya dahil etmek gereklidir. Bunun için aşağıdaki kod satırı kullanılabilir:

import Router from 'next/router';

Bu kod satırı, Router bileşenini import etmek ve sayfada kullanabilmek için gereklidir.

Router bileşeni kullanarak başka bir sayfaya yönlendirmek için ise aşağıdaki kod satırı kullanılabilir:

Router.push('/sayfa-basligi');

Bu kod satırı, Router bileşeni ile programatik olarak sayfa değiştirme işlemi yapar. Burada '/sayfa-basligi' değişkeni açıklandığı gibi, yönlendirilecek olan sayfanın başlığını içerir.

Router bileşeni ayrıca, geçiş işlemi tamamlandığında bir callback fonksiyonu çalıştırabilir. Bunun için aşağıdaki örnek kod kullanılabilir:

Router.push('/sayfa-basligi').then(() => window.scrollTo(0, 0));

Bu kod satırı, sayfa yönlendirmesi tamamlandığında, kullanıcının sayfanın en üstüne çıkmasını sağlar.

Programatik olarak Router bileşeni kullanarak sayfalar arasında geçiş yapmak oldukça kolay ve hızlı bir işlemdir. Bu yöntem sayesinde, kullanıcılar sayfalar arasında rahat bir şekilde gezinebilir ve site kullanımı artar.

Dynamic Routing

=

Next.js'in en önemli özelliklerinden biri dinamik yönlendirmedir. Bu özellik sayesinde projelerde dinamik sayfalar oluşturulabilir. Örneğin, blog gönderilerinin okuma sayfaları gibi. Dinamik yönlendirme, bir URL'deki parametrelere göre sayfaların oluşturulması ve yönlendirilmesini mümkün kılar. Örneğin, bir ürün sayfası oluştururken, ürünün benzersiz kimliğine dayalı bir URL kullanabilirsiniz.

Özellikler	Açıklama
Dinamik Yol	Dinamik sayfaların URL'sini oluşturmak için kullanılır.
getInitialProps () Methodu	Next.js'de getInitialProps () methodu, sayfalar arasında veri aktarımı için kullanılır. Örneğin, bir ürün sayfasında kullanıcının seçtiği ürünün verileri getInitialProps () methodu aracılığıyla alınabilir.

Dinamik yönlendirmede, yolu tanımlamak için adlandırılmış oluşturucular kullanabilirsiniz. Bu sayede bir URL oluşturmak yerine, URL oluşturucu kullanarak bir yolu belirleme imkanı elde edersiniz. Ayrıca, URL parametrelerine dayalı olarak sayfa bileşenlerini ayarlamak için dinamik yönlendirme kullanabilirsiniz. Bu, gereksiz sayfa yenilemelerini önler ve son kullanıcıların daha verimli bir deneyim yaşamasını sağlar.

Next.js'de dinamik yönlendirmeyi kullanarak, örneğin, bir ürün listeleme sayfası oluşturulabilinir. Bu sayfada, ürünlerin bir listesi gösterilir. Kullanıcılar ürünlerden birine tıkladığında, dinamik yönlendirme kullanarak, ürünün ayrıntılı bilgilerinin olduğu sayfaya yönlendirilir. Bu sayfalarda, ürün hakkında bilgi, fiyat, stok durumu gibi bilgiler gösterilebilir. Bu sayede kullanıcılar, alışveriş yapılan web sitelerinde kolaylıkla ürün arayıp bulabilirler.