Bu içerik bir seri içeriğin ilk yazısıdır. Next.js öğrenme serüvenimi okurlarımla birlikte ilerletmek için bu şekilde bir yol izlemeye karar verdim. Öncelikle Next.js nedir sorusunun cevabını vererek yazımıza başlayalım.

Next.js, JavaScript için açık kaynak bir React framework’üdür ve uygulamanız için otomatik olarak çoğu yapılandırma seçeneğini sağlar. Bu framework, önemli bir özellik olan client-side routing (müşteri tarafından yönlendirme) gibi bir dizi özellik sunar. Bu makalede, Next.js’de client-side routing konusunda size bir giriş sunacağız.

Statik Routing işlemleri

Next.js’de client-side routing, önceden tanımlanmış yolların, sayfaların ve URL’lere tekabül eden bileşenlerin birleşiminden oluşur. Client-side routing, uygulamanın kullanıcı etkileşimlerini hızlandırabilir ve sayfa yenilemelerini engelleyerek kullanıcı deneyimini artırır.

Next.js’de client-side routing’i kullanmak için, uygulamanızın pages dizininde bir dizi dosya oluşturmanız gerekir. Bu dosyalar, uygulamanızın navigasyonunda kullanılacak sayfalarınızı temsil eder. Örneğin, pages/index.js dosyası, ana sayfanızı temsil eder.

Bu sayfaların her biri, URL’ye göre erişilebilir hale getirmek için export default ile bir bileşen döndürmelidir. Örneğin, aşağıdaki örnek, /about URL’sine erişilebilir olan bir AboutPage bileşeni döndürür:

export default function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  )
}

Next.js, Link bileşenini kullanarak sayfalar arasında geçiş yapmanızı sağlar. Bu bileşen, sayfalar arasındaki navigasyonun daha hızlı ve sorunsuz olmasını sağlar. Aşağıdaki örnek, Link bileşeni kullanarak /about sayfasına yönlendiren bir bağlantı içerir:

import Link from 'next/link'

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}

export default Home

Dinamik Routing işlemleri

Dinamik routing, Next.js’in en önemli özelliklerinden biridir ve birçok web uygulaması için oldukça kullanışlıdır.

Next.js’de dinamik routing işlemleri için, pages dizininize [param].js adında bir dosya eklemeniz gerekmektedir. Bu dosya adı, URL’deki parametrelerin adını belirler. Örneğin, pages/post/[id].js dosyası, /post/1 veya /post/2 gibi URL’lerindeki id parametresine karşılık gelir.

Dinamik route dosyasında, bir bileşen oluşturarak, parametrelerin sayfadaki bileşenlere nasıl geçirileceğini belirleyebilirsiniz. Aşağıdaki örnekte, id parametresi, sayfada gösterilecek blog gönderisini belirleyen Post bileşenine aktarılır:

import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the blog post content.</p>
    </div>
  )
}

export default Post

Bu örnekte, useRouter kancası, Next.js’in Router özelliğini kullanarak URL’deki parametrelere erişmenizi sağlar. Ardından, id parametresi, bileşen içinde kullanılmak üzere router.query nesnesinden alınır.

Dinamik routing işlemlerinde ayrıca, Link bileşeni içindeki URL’lerin parametrelerle birleştirilmesi gereklidir. Aşağıdaki örnek, Post bileşenine /post/1 gibi bir URL içinde id parametresini ileterek erişir:

import Link from 'next/link'

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/post/[id]" as="/post/1">
        <a>Post 1</a>
      </Link>
    </div>
  )
}

export default Home

Bu örnekte, as özelliği, bileşenin eriştiği URL’nin gerçek URL’sini belirler. Yani /post/1 URL’si, bileşen içinde id parametresine karşılık gelir. Link bileşeni, sayfa yenilemeden URL’yi değiştirerek, dinamik routing işlemini gerçekleştirir.

Next.js, hem dinamik hem de statik routing işlemlerini destekleyerek, web uygulamalarınızda daha fazla esneklik ve performans sağlar. Statik routing, önceden belirlenmiş sayfaların yönlendirilmesi için idealdir. Dinamik routing ise URL’lerin parametrelerle dinamik olarak değiştirilmesine olanak sağlar. useRouter ve Link bileşenleri, routing işlemlerini oldukça kolaylaştırır. Bu özellikleri kullanarak, Next.js ile daha dinamik ve interaktif web uygulamaları oluşturabilirsiniz.

Bu bir seri yazı olacak, devamı için tıklayabilirsiniz.