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