Next.jsReact
شروع کار با App Router در Next.js
تیم وبلاگ · ۳ مهر ۱۴۰۵ · 1 دقیقه مطالعه
مفاهیم پایه‌ی App Router شامل layout، page، Server Components و نحوه‌ی تعریف مسیرهای پویا را با مثال ساده یاد بگیرید.
App Router ساختار جدید مسیریابی Next.js است که بر پایه‌ی پوشه‌ها بنا شده است. هر پوشه در مسیر app می‌تواند یک مسیر عمومی باشد و فایل page.tsx محتوای آن را مشخص می‌کند.
فایل‌های خاص
- layout.tsx — ساختاری که بین صفحات مشترک است و با ناوبری دوباره رندر نمی‌شود.
- page.tsx — محتوای منحصربه‌فرد هر مسیر.
- loading.tsx — نمایش وضعیت در حین بارگذاری.
- not-found.tsx — صفحه‌ی ۴۰۴ برای همان بخش.
مسیر پویا
برای ساخت مسیر پویا نام پوشه را داخل کروشه قرار می‌دهیم. در Next.js نسخه‌های جدید، params یک Promise است و باید با await خوانده شود.
export default async function ArticlePage({ params,}: { params: Promise<{ slug: string }>;}) { const { slug } = await params; return <h1>{slug}</h1>;}Server یا Client؟
به‌طور پیش‌فرض کامپوننت‌ها Server Component هستند. فقط زمانی که به state، رویدادهای مرورگر یا Context نیاز دارید، با دستور 'use client' آن را Client Component کنید. این کار حجم JavaScript ارسالی به مرورگر را کم نگه می‌دارد.