Next.js – Routing İşlemleri

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

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

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