Πώς να δημιουργήσετε δυναμικές διαδρομές στο Next.js

Οι δυναμικές διαδρομές είναι σελίδες που σας επιτρέπουν να χρησιμοποιείτε προσαρμοσμένες παραμέτρους σε μια διεύθυνση URL. Είναι ιδιαίτερα ωφέλιμα όταν δημιουργείτε σελίδες για δυναμικό περιεχόμενο.

Για ένα ιστολόγιο, μπορείτε να χρησιμοποιήσετε μια δυναμική διαδρομή για να δημιουργήσετε διευθύνσεις URL με βάση τους τίτλους των αναρτήσεων του ιστολογίου. Αυτή η προσέγγιση είναι καλύτερη από τη δημιουργία ενός στοιχείου σελίδας για κάθε ανάρτηση.

---

---

Μπορείτε να δημιουργήσετε δυναμικές διαδρομές στο Next.js ορίζοντας δύο συναρτήσεις: getStaticProps και getStaticPaths.

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

Δημιουργία δυναμικής διαδρομής στο Next.js

Για να δημιουργήσετε μια δυναμική διαδρομή στο Next.js, προσθέστε αγκύλες σε μια σελίδα. Για παράδειγμα, [params].js, [slug].js ή [id].js.

Για ένα blog, θα μπορούσατε να χρησιμοποιήσετε ένα γυμνοσάλιαγκο για τη δυναμική διαδρομή. Έτσι, αν μια θέση είχε το γυμνοσάλιαγκα dynamic-routes-nextjs , η προκύπτουσα διεύθυνση URL θα είναι https://example.com/dynamic-routes-nextjs.

Στο φάκελο pages, δημιουργήστε ένα νέο αρχείο που ονομάζεται [slug].js και δημιουργήστε το στοιχείο Post που λαμβάνει τα δεδομένα της ανάρτησης ως υποστηρικτικό στοιχείο.

στείλτε ψεύτικο email από κάποιον άλλο

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
}; 

Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να μεταβιβάσετε τα δεδομένα της ανάρτησης στην Ανάρτηση. Η μέθοδος που θα επιλέξετε εξαρτάται από τον τρόπο απόδοσης της σελίδας. Για να ανακτήσετε τα δεδομένα κατά τη διάρκεια του χρόνου κατασκευής, χρησιμοποιήστε την getStaticProps() και για να τα λάβετε κατόπιν αιτήματος, χρησιμοποιήστε την getServerSideProps().

---

---

Χρησιμοποιώντας το getStaticProps για τη λήψη δεδομένων ανάρτησης

Οι αναρτήσεις ιστολογίου δεν αλλάζουν τόσο συχνά και η ανάκτησή τους κατά το χρόνο δημιουργίας είναι αρκετή. Επομένως, τροποποιήστε το στοιχείο Post για να συμπεριλάβει την 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 δημιουργεί τα δεδομένα ανάρτησης που αποδίδονται στη σελίδα. Χρησιμοποιεί το γυμνοσάλιαγκα από τις διαδρομές που δημιουργούνται από τη συνάρτηση getStaticPaths.

---

---

Χρήση του getStaticPaths για τη λήψη μονοπατιών

Η συνάρτηση getStaticPaths() επιστρέφει τις διαδρομές για τις σελίδες που θα πρέπει να προ-απόδοση. Αλλάξτε το στοιχείο Post για να το συμπεριλάβετε:

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

Αυτή η υλοποίηση του getStaticPaths ανακτά όλες τις αναρτήσεις που πρέπει να αποδοθούν και επιστρέφει τα slugs ως παραμέτρους.

Συνολικά, το [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 και να αποθηκεύσετε τη δυναμική διαδρομή μέσα σε αυτόν.

Για παράδειγμα, για να δημιουργήσετε /pages/posts/dynamic-routes-nextjs, αποθηκεύστε το [slug].js μέσα /σελίδες/αναρτήσεις.

Πρόσβαση στις παραμέτρους URL από τις δυναμικές διαδρομές

Αφού δημιουργήσετε τη διαδρομή, μπορείτε να ανακτήσετε το Παράμετρος URL από τη δυναμική διαδρομή χρησιμοποιώντας το userRouter() React hook .

Για τις σελίδες/[slug].js, πάρτε το slug ως εξής:

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. Σημειώστε ότι αυτή η προσέγγιση είναι πιο αργή. θα πρέπει να το χρησιμοποιείτε μόνο όταν καταναλώνετε δεδομένα που αλλάζουν τακτικά.

γιατί το χρώμιο καταλαμβάνει τόση μνήμη