Nextjs Tutorial —Nested Dynamic Routes

Nextjs , React ile geliştirmekte olduğumuz web uygulamalarını geliştirmek için popülerdir.Nextjs v14 ile birlikte Nested Dynamic Routes ( iç içe dinamik yollar ) özelliği , uygulamaların daha karmaşık yol yapıları oluşturmaya imkan tanımaktadır. Bu yazımızda , Nested Dynamic Routes özelliğini nasıl kullanabileceğimizi adım adım öğrenmiş olacağız.

Nextjs’te, dosya ismine köşeli parantex koyarak dinamik yollar oluşturabiliriz. Örneğin , “pages/posts/[id].js” şeklinde yaptığımızda URL’ler “posts/1” , “posts/2” gibi farklı ID’lere erişmeye imkan tanımaktadır.

Nested Dynamic Routes Oluşturma

Nextjs v14'te, Nested Dynamic Routes oluşturmak için özel klasör yapısına ihtiyacımız vardır. Bu adımlar sırasıyla;

Klasör Yapısını Oluşturma

İlk olarak yapıya uygun klasör yapısını oluşturalım. Örneğin, bir blog uygulamasında her bir post için yorumlar bölümü oluşturabiliriz.Bu örnek üzerinde klasör yapısını oluşturalım.

pages/
└── posts/
    └── [postId]/
        ├── index.js       // Post detay sayfası
        └── comments/
            └── [commentId].js  // Yorum detay sayfası

Dinamik Yolların Tanımlanması

Her bir dinamik yol için bir React Componenti oluşturalım. Örneğin, “/pages/posts/[postId]/index.js” dosyasını oluşturalım.

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { postId } = router.query;

  return <div>Post ID: {postId}</div>;
};

export default Post;

Sırada her post için commentleri oluşturalım. “/pages/posts/[postId]/comments/[commentId].js” dosyasını oluşturalım.

import { useRouter } from 'next/router';

const Comment = () => {
  const router = useRouter();
  const { postId, commentId } = router.query;

  return <div>Comment ID: {commentId} on Post ID: {postId}</div>;
};

export default Comment;

Link ve Navigasyon Tanımlamaları

Yine Nextjs ile beraber gelen Link componentini kullanarak bu yolların navigasyonu sağlayabiliriz. Örneğin;

import Link from 'next/link';

const PostList = ({ posts }) => {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <Link href={`/posts/${post.id}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
};

İpuçları ve En İyi Uygulamalar

Yol Parametlerini Anlamak: useRouter hook’u yol parametrelerine erişmemize imkan tanır. Bu parametreleri bileşenimizde akıllıca kullanmamız gerekir.
404 Sayfaları: Geçersiz bir ID ile bir sayfaya erişildiğinde uygun bir 404 sayfasına yönlendirilmesi gerekmektedir.
SEO ve Performans: Dinamik yolları kullanırken, SEO ve uygulama performansını optimize etmeyi unutmayın.

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