صفحات و لایه‌ها در Next.js – ساخت مسیرهای پویا، لایه‌های تو در تو و لینک‌دهی بین صفحات

| Next.js page |

| root layout |

| dynamic route |

| searchParams |

ساخت صفحه در Next.js

برای ساخت یک صفحه، کافی است فایل page.tsx را در پوشه app ایجاد کرده و یک کامپوننت React را به‌صورت پیش‌فرض export کنید:

// app/page.tsx
export default function Page() {
  return <h1>Hello Next.js!</h1>
}

ساخت لایه ریشه

لایه‌ها رابط‌های مشترک بین صفحات هستند و هنگام ناوبری مجدد، وضعیت خود را حفظ می‌کنند. لایه ریشه باید شامل تگ‌های <html> و <body> باشد:

// app/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

ساخت مسیر تو در تو

برای ساخت مسیر /blog، پوشه‌ای به نام blog در app ایجاد کرده و فایل page.tsx را در آن قرار دهید:

// app/blog/page.tsx
export default async function Page() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  );
}

ساخت مسیر پویا

برای ساخت مسیر پویا مانند /blog/[slug]، پوشه‌ای با نام [slug] درون blog ایجاد کرده و فایل page.tsx را در آن قرار دهید:

// app/blog/[slug]/page.tsx
export default async function BlogPostPage({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

لایه‌های تو در تو

می‌توان در هر سطح از مسیر، فایل layout.tsx اضافه کرد تا لایه‌ای خاص برای آن بخش ایجاد شود. مثلاً برای /blog:

// app/blog/layout.tsx
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

دریافت پارامترهای جستجو

در کامپوننت‌های سروری، می‌توان از prop searchParams برای دریافت پارامترهای URL استفاده کرد:

// app/page.tsx
export default async function Page({ searchParams }) {
  const filters = (await searchParams).filters;
}

در کامپوننت‌های کلاینتی، از هوک useSearchParams استفاده می‌شود.

لینک‌دهی بین صفحات

برای ناوبری بین صفحات، از کامپوننت <Link> استفاده کنید که از next/link وارد می‌شود:

// app/ui/post.tsx
import Link from 'next/link';

export default async function Post({ post }) {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

استفاده از PageProps و LayoutProps

Next.js به‌صورت خودکار انواع کمکی مانند PageProps و LayoutProps را تولید می‌کند تا پارامترها و slotها را به‌صورت تایپ‌شده دریافت کنید:

// app/blog/[slug]/page.tsx
export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params;
  return <h1>Blog post: {slug}</h1>;
}

// app/dashboard/layout.tsx
export default function Layout(props: LayoutProps<'/dashboard'>) {
  return (
    <section>
      {props.children}
      {/* If you have app/dashboard/@analytics */}
      {/* {props.analytics} */}
    </section>
  );
}

جمع‌بندی

با استفاده از فایل‌های page.tsx و layout.tsx، می‌توان مسیرهای پویا، لایه‌های تو در تو و صفحات قابل لینک‌دهی در Next.js ساخت. این ساختار باعث افزایش انعطاف‌پذیری، خوانایی و قابلیت نگهداری پروژه‌های React می‌شود.