سیستم مسیردهی Next.js بر پایه پوشههاست. پوشهها آدرس سایت را میسازند و فایلها ظاهر آن را تعیین میکنند.
صفحه همان محتوایی است که کاربر با باز کردن یک آدرس مشخص میبیند. برای ساخت آن، کافی است فایلی به نام page.tsx درون پوشه قرار دهید:
// app/page.tsx
export default function Page() {
return <h1>صفحه اصلی وبسایت</h1>
}
لایه، ظاهر مشترکی است که بین چند صفحه تقسیم میشود (مثل هدر و فوتر). لایهها با جابهجایی بین صفحات دوباره رندر نمیشوند و وضعیت خود را حفظ میکنند:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fa">
<body>
<nav>منوی ناوبری مشترک</nav>
<main>{children}</main>
</body>
</html>
)
}
نکته: فایل
layout.tsxدر بالاترین سطح پوشهapp، لایه ریشه (Root Layout) نام دارد. وجود آن الزامی است و حتماً باید شامل تگهای<html>و<body>باشد.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app