כיצד ליצור מסלולים דינמיים ב-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 Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
};

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

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

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

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

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

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

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

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
};

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

כמה עולה youtube פרימיום

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

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

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

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

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

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

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

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

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

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

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

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

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

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