Nextjs Tutorial — Nested Routes & Dynamic Routes

Nested Routes

Next.js, dosya tabanlı routing yapısıyla tanımlanır, burada pages klasörü içindeki dosya ve klasör yapısı URL yolunu oluşturur. Next.js v14 ile gelen nested routing özelliği, daha karmaşık URL yapılarını kolayca yönetmenizi sağlar.

Ana Noktalar:

1. Dosya Yapısı: pages klasörü içinde iç içe klasörler oluşturarak ve her klasör içine bir index.js dosyası koyarak nested routes yapılır.
2. Yol Tanımlama: Her bir iç içe yol için kendi index.js dosyasına sahip olacak şekilde klasörler aracılığıyla tanımlanır.
3. Link Componenti: Nested routes arasında gezinmek için Nextjs’in Link componenti kullanılır.

Proje Yapısı

- pages
  - index.js        // Ana sayfa
  - blog
    - index.js      // Blog listesi
    - [category]    // Kategoriye göre bloglar
      - index.js    // Kategoriye göre blog listesi
      - [id].js     // Kategoriye göre spesifik blog detay sayfası

Yukarıdaki yapıda ,/blog URL'i blog listesi için, /blog/[category] URL'i kategoriye göre bloglar için ve /blog/[category]/[id] URL'i kategoriye göre spesifik bir blog postu için kullanılır.

Kod Örneği

Anasayfa ( pages/index.js ) :

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Ana Sayfa</h1>
      <Link href="/blog">
        <a>Blog'a Git</a>
      </Link>
    </div>
  );
}

Blog Listesi ( pages/blog/index.js ):

import Link from 'next/link';

export default function Blog() {
  const categories = ['teknoloji', 'sanat', 'eğitim'];

  return (
    <div>
      <h1>Blog Kategorileri</h1>
      {categories.map(category => (
        <div key={category}>
          <Link href={`/blog/${category}`}>
            <a>{category} Kategorisi</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

Kategoriye Göre Blog Listesi ( pages/blog/[category]/index.js ):

import { useRouter } from 'next/router';
import Link from 'next/link';

export default function Category() {
  const router = useRouter();
  const { category } = router.query;
  const posts = [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];

  return (
    <div>
      <h1>{category} Kategorisindeki Bloglar</h1>
      {posts.map(post => (
        <div key={post.id}>
          <Link href={`/blog/${category}/${post.id}`}>
            <a>{post.title}</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

Spesifik Blog Detay Sayfası ( pages/blog/[category]/[id].js ):

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <div>
      <h1>{category} Kategorisinde Post: {id}</h1>
    </div>
  );
}

Bu örnekler, nested routing yapısını ve nasıl kullanılacağını gösteriyor. Her bir route için uygun sayfa componentleri oluşturulmuş ve dinamik URL parametreleri useRouter hook’u ile yönetiliyor.

Dynamic Routes

Nextjs’te Dynamic Routes, uygulamanızın URL yapısını esnek bir şekilde yönetmenize imkan tanır.İşte dynamic routes ile ilgili bazı noktalar ve bu yapıyı kullanarak basit bir blog uygulaması için örnek bir yapıyı aşağıdaki bulabilirsiniz.

1. Dosya Adlandırma: Dinamik yollar, pages dizini altında köşeli parantezler “[ ]” içinde adlandırılmış dosyalarla oluşturulur. Örneğin, pages/posts/[id].js bir dinamik yol oluşturur.
2. Catch-All Routes: Catch-all yollar, birden fazla URL segmentini yakalamak için kullanılır. Örneğin, pages/posts/[…slug].js dosyası posts/a/b/c gibi çoklu segmentleri yakalar.
3. Opsiyonel Catch-All Routes: Opsiyonel catch-all yolları, pages/posts/[[…slug]].js şeklinde tanımlanır. Bu, hem posts hem de posts/a/b gibi URL’leri destekler.
4. Link Componenti ve useRouter Hook’u: Link componenti, farklı sayfalar arasında gezinme sağlar. useRouter hook’u ise mevcut URL bilgisine erişim sağlar.

Proje Yapısı :

- pages
  - posts
    - index.js      // Blog listesi sayfası
    - [id].js       // Blog detay sayfası

Kod Örneği:

Blog Listesi Sayfası ( pages/posts/index.js ):

import Link from 'next/link';

export default function Posts() {
  const posts = [1, 2, 3]; // Örnek blog post id'leri

  return (
    <div>
      <h1>Blog Listesi</h1>
      {posts.map(id => (
        <div key={id}>
          <Link href={`/posts/${id}`}>
            <a>Post {id}</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

Blog Detay Sayfası ( pages/posts/[id].js ):

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query; // URL'den id parametresini alır

  return (
    <div>
      <h1>Post: {id}</h1>
    </div>
  );
}

Yukarıdaki örnek, posts ana dizini altında iki sayfa içeren basit bir blog yapısını gösterir. Ana sayfada (index.js), mevcut postların listesi ve her posta ait linkler yer alır. Detay sayfası ([id].js), URL’den gelen id parametresine göre içerik gösterir.

Dynamic Routes, veri tabanından içerik çekme veya API ile etkileşim gibi durumlarda oldukça güçlü bir araçtır. Her id için farklı içerik sunmak üzere veri tabanı sorguları veya API istekleri yapabilirsiniz.

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.

BuymeCoffee || Linkedin