در این مطلب با نحوه کارکرد سیستم روتینگ فریم ورک محبوب Next.js 14 به همراه مثال و تمرین آشنا خواهیم شد.
در نسخه 14 این فریم ورک ما برای هر مسیر جدیدی که نیاز داشته باشیم ابتدا پوشه اون رو در app ایجاد و در مرحله بعد فایل “page.tsx” رو در آن قرار می دیم.
خوب این یعنی چی؟!
فرض کنید من یک صفحه “درباره ما” نیاز دارم، برای داشت این صفحه ابتدا یک پوشه به نام “about” در پوشه “app” ایجاد می کنم و بعد یک فایل به نام “page.tsx” درونش قرار می دم، در اینجا فایل “page.tsx” همون فایل روت یا “index” ما هست که کاربر زمانی که آدرس این صفحه رو فراخونی میکنه در ابتدا محتویات این فایل رو خواهد دید.
و به همین شکل برای سایر مسیرها روند فوق رو تکرار می کنیم، در مثال زیر من دو پوشه به نام های “about” و “blog” ایجاد کردم.
مسیریابی در next.js 14
ببدین ترتیب با وارد کردن آدرس پروژه و در ادامه مسیر درخواستی “about” و یا “blog” می تونم علاوه بر دسترسی ببه این مسیرها، محتویات فایل های “page.tsx” هر کدامم رو مشاهده کنم.
روتینگ در next.js 14
خوب، تا اینجای کار ما مسیرهای استاتیک رو بررسی کردیم، حالا اگر مسیر داینامیکی نیاز داشتته باشیم باید چه کاری اینجام بدیم؟
به عنوان مثال من در صفحه بلاگ خودم یک مقدار داینامیک رو از آدرس مرورگر دریافت کنم. مثل حالت زیر:
http://localhost:3000/blog/123
مسیرهای داینامیک در Next.js 14
در اینجا می خوام اگر مقداری بعد از “blog/” وارد شد به صفحه دیگری هدایت شم و در آنجا پردازش های مربوط به این مقدار داینامیک وارد شده که در اینجا “123” هست رو مدیریت کنم.
همانطور که بالاتر توضیح دادم ما برای مسیرهای جدید باید پوشه جدیدی ایجاد کنیم و فایل “page.tsx” رو هم به عنوان روت یا فایل “index” در آن قرار بدیم. در اینجا هم من یک پوشه به نام “id” جهت مدیریت مقدار داینامیک وارد شده بعد از “blog/” ایجاد می کنم.
نکته:
نام پوشه هایی که قرار است مقادیر داینامیک را مدیریت کنند باید درون علائم “[]” قرار بگیرد.
مدیریت مقادیر داینامیک در Next.js
حالا می خوام مقدار وارد شده بعد از “blog/” رو دریافت و نمایش بدم، برای اینکار از “params” استفاده می کنیم که مقادیر رو به عنوان آرگومان های تابع دریافت می کنه.
// app/blog/[id]/page.tsx
function PostPage({ params }: { params: { id: string } }) {
return (
<>
<h1> Control Dynamic Content</h1>
<h2>Post ID: {params.id}</h2>
</>
);
}
export default PostPage;
نتیجه:
استفاده از params در nextjs
برای دریافت مقدار داینامیک وارد شده در url و ذخیره و چاپ آن بدین شکل عمل می کنیم:
ذخیره مقدار داینامیک در متغیر
مسیریابی یا Navigation در Next.js 14
ما برای navigate کردن یا پیمایش بین صفحات در next.js از کامپوننت “Link” استفاده می کنیم، این کار بسیار ساده است، تنها کافیه این کامپوننت رو به فایل خودمون اضافه و فراخوانی کنیم.
مسیریابی یا Navigation در Next.js 14
برای مطالعه بیشتر در مورد مسیریابی صفحات پیشنهاد می کنم داکیومنشن سایت رسمی Next.js رو مطالعه کنید.
برای دیدن مطالب آموزشی بیشتر به بلاگ iTsir مراجعه کنید.
