آشنایی با getStaticPaths
در نکست جی‌اس، از getStaticPaths برای ایجاد صفحات ایستا که نیاز به مسیریابی دینامیک دارند، استفاده می‌شود. این قابلیت به ما اجازه می‌دهد تا صفحات مختلف را بر اساس پارامترهای مختلف ایجاد کنیم، بدون اینکه هر بار نیاز به رندرینگ سمت سرور داشته باشیم. به عبارتی getStaticPaths با کمک getStaticProps می‌تواند صفحات ایستا را از قبل در مرحله بیلد تولید کند.
به عنوان مثال فرض کنید شما یک وبسایت وبلاگی دارید که برای هر پست یک صفحه جداگانه دارد. با استفاده از getStaticPaths می‌توانید برای هر پست یک مسیر دینامیک ایجاد کنید، تا کاربران بتوانند به صفحات مختلف دسترسی داشته باشند.
از آنجا که صفحات ساخته شده با getStaticPaths ایستا هستند، این روش می‌تواند سرعت لود صفحات و تجربه کاربری را بهبود بخشد. زیرا این صفحات قبلاً روی سرور ایجاد شده‌اند و برای هر درخواست نیازی به رندرینگ مجدد ندارند.
چگونگی استفاده از getStaticPaths
برای استفاده از getStaticPaths ابتدا باید تابعی به همین نام را در فایل صفحه خود تعریف کنید. این تابع لیستی از مسیرهای ممکن را برمی‌گرداند و به نکست جی‌اس می‌گوید که برای هر یک از این مسیرها یک صفحه ایستا تولید کند.
یکی از نکات مهم در getStaticPaths برگرداندن پارامترهای مسیر است. شما باید مشخص کنید که برای هر مسیر چه پارامتری باید برگردانده شود. این کار باعث می‌شود تا نکست جی‌اس بداند کدام صفحات را در زمان بیلد تولید کند.
export async function getStaticPaths() {\r\n const res = await fetch('https://example.com/api/posts');\r\n const posts = await res.json();\r\n\r\n const paths = posts.map((post) => ({\r\n params: { id: post.id.toString() },\r\n }));\r\n\r\n return { paths, fallback: false };\r\n}توضیح خط به خط کد
export async function getStaticPaths()این خط یک تابع غیرهمزمان به نام getStaticPaths تعریف می‌کند که برای واکشی مسیرهای استاتیک استفاده می‌شود.
const res = await fetch('https://example.com/api/posts');یک درخواست HTTP به آدرس مشخص شده ارسال می‌کند تا داده‌های مورد نیاز را دریافت کند.
const posts = await res.json();داده‌های دریافتی را به فرمت JSON تبدیل و داخل متغیر posts ذخیره می‌کند.
const paths = posts.map((post) => ({ params: { id: post.id.toString() }, }));برای هر پست، یک مسیر با پارامتر id ایجاد می‌کند. این مسیرها بر اساس id پست‌ها هستند.
return { paths, fallback: false };لیستی از مسیرهای ایجاد شده را برمی‌گرداند تا نکست جی‌اس بتواند صفحات ایستا را در زمان بیلد ایجاد کند. مقدار fallback مشخص می‌کند که صفحات غیرموجود باید خطای 404 بدهند یا نه.