כיצד ליצור מסלולים דינמיים ב-Next.js

מסלולים דינמיים הם דפים המאפשרים לך להשתמש בפרמטרים מותאמים אישית בכתובת אתר. הם מועילים במיוחד בעת יצירת דפים לתוכן דינמי.

עבור בלוג, אתה יכול להשתמש במסלול דינמי כדי ליצור כתובות URL המבוססות על כותרות הפוסטים בבלוג. גישה זו עדיפה על יצירת רכיב עמוד עבור כל פוסט.

ניתן ליצור מסלולים דינמיים ב-Next.js על ידי הגדרת שתי פונקציות: getStaticProps ו-getStaticPaths.

יצירת מסלול דינמי ב-Next.js

כדי ליצור מסלול דינמי ב-Next.js, הוסף סוגריים לדף. לדוגמה, [params].js, [slug].js או [id].js.

עבור בלוג, אתה יכול להשתמש בשבלול עבור המסלול הדינמי. אז, אם לפוסט היה את הקליעה dynamic-routes-nextjs, כתובת האתר שתתקבל תהיה https://example.com/dynamic-routes-nextjs.

בתיקיית pages, צור קובץ חדש בשם [slug].js וצור את רכיב ה-Post שלוקח את נתוני הפוסט כ-prop.

const פוסט = ({ postData }) => {
 לַחֲזוֹר <div>{/* תוכן */}</div>;
};

ישנן דרכים שונות להעביר את נתוני הפוסט לפוסט. השיטה שתבחר תלויה באופן שבו אתה רוצה לעבד את הדף. כדי להביא את הנתונים במהלך זמן הבנייה, השתמש ב-getStaticProps() וכדי להביא אותם לפי בקשה, השתמש ב-getServerSideProps().

שימוש ב-getStaticProps כדי להביא נתוני פוסטים

פוסטים בבלוג אינם משתנים באותה תדירות, ומספיק להביא אותם בזמן הבנייה. אז שנה את רכיב הפוסט כך שיכלול getStaticProps().

יְבוּא { getSinglePost } מ "../../utils/פוסטים";
const פוסט = ({ תוכן }) => {
 לַחֲזוֹר <div>{/* תוכן */}</div>;
};
יְצוּאconst getStaticProps = אסינכרון ({ params }) => {
const פוסט = לְהַמתִין getSinglePost (params.slug);
לַחֲזוֹר {
 אביזרים: { ...פוסט },
 };
 };

הפונקציה getStaticProps מייצרת את נתוני הפוסט המוצגים בדף. הוא משתמש ב-slug מהנתיבים שנוצרו על ידי הפונקציה getStaticPaths.

שימוש ב-getStaticPaths כדי להביא נתיבים

הפונקציה getStaticPaths() מחזירה את הנתיבים עבור הדפים שאמורים להיות מעבדים מראש. שנה את רכיב הפוסט כך שיכלול אותו:

יְצוּאconst getStaticPaths = אסינכרון () => {
const paths = getAllPosts().map(({ slug }) => ({ params: { שבלול } }));
לַחֲזוֹר {
 שבילים,
 לסגת: שֶׁקֶר,
 };
};

הטמעה הזו של getStaticPaths מביאה את כל הפוסטים שצריך לעבד ומחזירה את הקלעים כפרמים.

בסך הכל, [slug].js ייראה כך:

יְבוּא { getAllPosts, getSinglePost } מ "../../utils/פוסטים";
const פוסט = ({ תוכן }) => {
 לַחֲזוֹר <div>{תוֹכֶן}</div>;
};
יְצוּאconst getStaticPaths = אסינכרון () => {
const paths = getAllPosts().map(({ slug }) => ({ params: { שבלול } }));
לַחֲזוֹר {
 שבילים,
 לסגת: שֶׁקֶר,
 };
};
יְצוּאconst getStaticProps = אסינכרון ({ params }) => {
const פוסט = לְהַמתִין getSinglePost (params.slug);
לַחֲזוֹר {
 אביזרים: { ...פוסט },
 };
};
יְצוּאבְּרִירַת מֶחדָל הודעה;

עליך להשתמש ב-getStaticProps() וב-getStaticPaths() יחד כדי ליצור מסלול דינמי. הפונקציה getStaticPaths() צריכה ליצור את המסלולים הדינמיים, בעוד getStaticProps() מביאה את הנתונים המעובדים בכל נתיב.

יצירת מסלולים דינמיים מקוננים ב-Next.js

כדי ליצור מסלול מקונן ב-Next.js, עליך ליצור תיקיה חדשה בתוך תיקיית הדפים ולשמור את המסלול הדינמי בתוכה.

לדוגמה, כדי ליצור /pages/posts/dynamic-routes-nextjs, שמור את [slug].js בפנים /pages/posts.

גישה לפרמטרים של כתובת URL ממסלולים דינמיים

לאחר יצירת המסלול, תוכל לאחזר את פרמטר כתובת אתר מהמסלול הדינמי באמצעות ה-useRouter() וו תגובה.

עבור pages/[slug].js, קבל את הקליע כך:

יְבוּא { useRouter } מ 'הבא/נתב'
const פוסט = () => {
const נתב = useRouter()
const { slug } = router.query
 לַחֲזוֹר <ע>פוסט: {סלאג}</p>
}
יְצוּאבְּרִירַת מֶחדָל הודעה

זה יציג את הקלף של הפוסט.

ניתוב דינמי עם getServerSideProps

באמצעות Next.js אתה יכול להביא נתונים בזמן הבנייה וליצור מסלולים דינמיים. אתה יכול להשתמש בידע הזה כדי לעבד מראש דפים מרשימת פריטים.

אם אתה רוצה להביא נתונים על כל בקשה, השתמש ב-getServerSideProps במקום ב-getStaticProps. שימו לב שגישה זו איטית יותר; עליך להשתמש בו רק בעת צריכת נתונים המשתנים באופן קבוע.