بر خلاف React که برای جا به جایی بین صفحات از کتابخانه های Routing جداگانه استفاده می کنه، Nextjs از سیستم Routing داخلی خودش بهره می بره. با این سیستم دیگه نیازی نیست که برای جا به جایی بین صفحات از کتابخانه های جداگانه استفاده کنیم.
البته فقط می تونیم از همین سیستم Routing استفاده کنیم و به راحتی نمی تونیم سیستم Routing رو جایگزین کنیم (گرچه مشکلی هم داخلش ندیدم)
این سیستم، مسیر دهی رو بر اساس نام فایل ها و پوشه ها ایجاد می کنه. به این صورت که زمانی که می خوایم وارد صفحه خاصی بشیم، نام فایل به همراه پوشه ای که درونش قرار داره subdomain محسوب و به آدرس اصلی اضافه میشه.
پوشه pages مبدا مسیردهی در پروژه های nextjs هست
برای مثال به آدرس localhost:3000/api/hello برید. خروجی باید چنین چیزی باشه:
{ "name" : "John Doe" }
چیزی که می بینید خروجی pages/api/hello.js هست
برای درک بهتر، ادیتور رو باز کنید و در پوشه pages فایل posts.js رو ایجاد کنید:
پروژه رو اجرا کنید و به آدرس localhost:3000/posts برید:
کلمه "پست ها" درون صفحه مرورگر نمایش داده شده
برای ایجاد لینک بین صفحات مختلف از <Link> در Nextjs استفاده میشه. برای استفاده posts.js رو به این شکل ویرایش کنید:
این کامپوننت هم مانند <a> آدرس جایی که باید بهش لینک بشه، درون خصوصیت href تعیین میشه
تفاوتشون اینه که هنگام کلیک روی <Link> صفحه بدون رفرش تغییر میکنه ولی وقتی که روی <a> کلیک می کنیم، صفحه رفرش میشه. فایل posts.js رو به این صورت ویرایش کنید:
وارد صفحه posts در مرورگر بشید و خودتون امتحان کنید.
برای اطمینان بیشتر می تونید از طریق devtools پس زمینه <body> رو تغییر بدید و روی لینک ها کلیک کنید.
وقتی که روی <Link> کلیک میشه، پس زمینه تغییر نمیکنه که یعنی صفحه رفرش نمیشه ولی وقتی روی <a> کلیک می کنیم، پس زمینه تغییر می کنه. این قابلیت (client side navigation) از جاوااسکریپت برای جا به جایی بین صفحات استفاده می کنه که باعث افزایش سرعت جا به جایی بین صفحات میشه
نیازی به ایمپورت کردن React درون کامپوننت ها نیست. چون Nextjs به صورت خودکار ازش استفاده می کنه.
اگه بخواییم تخصصی تر موضوع رو بررسی کنیم، Nextjs از Code splitting و prefetching به صورت built-in درون خودش استفاده می کنه. یعنی در زمان build time اگه مرورگر به <Link> برخورد کنه، به طور خودکار کد های صفحه لینک شده در پس زمینه واکشی (prefetching) میشه و وقتی که روی لینک کلیک میشه، انتقال به صفحه خیلی سریع خواهد بود.
فریم ورک Nextjs به طور پیش فرض بهینه سازی های لازم رو نه تنها برای لینک ها، بلکه برای تمام برنامه انجام میده. دلیلش هم اینه که اکثر قابلیت های Nextjs به صورت داخلی (built-in) درونش تعبیه شده و نیازی به انجام کار خاصی از طرف ما نیست
برای لینک های داخلی وبسایت از <Link> و برای لینک های خارجی از <a> استفاده کنید
