LogoENEnglish

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

Next.js از سیستم مسیریابی مبتنی بر فایل استفاده می‌کند. در این مقاله، نحوهٔ ساخت صفحات، لایه‌های ریشه و تو در تو، مسیرهای پویا، دریافت پارامترهای جستجو، و لینک‌دهی بین صفحات را بررسی می‌کنیم. همچنین با انواع props کمکی مانند PageProps و LayoutProps آشنا می‌شویم که به مدیریت بهتر داده‌ها در مسیرها کمک می‌کنند.

Next.js pageroot layoutdynamic routesearchParams

~3 دقیقه مطالعه • بروزرسانی ۳ آبان ۱۴۰۴

ساخت صفحه در 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 می‌شود.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article