Οι δυναμικές διαδρομές είναι σελίδες που σας επιτρέπουν να χρησιμοποιείτε προσαρμοσμένες παραμέτρους σε μια διεύθυνση 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 που λαμβάνει τα δεδομένα της ανάρτησης ως υποστηρικτικό στοιχείο.
συνθ Δημοσίευση = ({ postData }) => {
ΕΠΙΣΤΡΟΦΗ <div>{/* περιεχόμενο */}</div>;
};
Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να μεταβιβάσετε τα δεδομένα της ανάρτησης στην Ανάρτηση. Η μέθοδος που θα επιλέξετε εξαρτάται από τον τρόπο απόδοσης της σελίδας. Για να ανακτήσετε τα δεδομένα κατά τη διάρκεια του χρόνου κατασκευής, χρησιμοποιήστε την getStaticProps() και για να τα λάβετε κατόπιν αιτήματος, χρησιμοποιήστε την getServerSideProps().
Χρησιμοποιώντας το getStaticProps για τη λήψη δεδομένων ανάρτησης
Οι αναρτήσεις ιστολογίου δεν αλλάζουν τόσο συχνά και η ανάκτησή τους κατά το χρόνο δημιουργίας είναι αρκετή. Επομένως, τροποποιήστε το στοιχείο Post για να συμπεριλάβει την getStaticProps().
εισαγωγή { getSinglePost } από "../../usils/posts";συνθ Δημοσίευση = ({ περιεχόμενο }) => {
ΕΠΙΣΤΡΟΦΗ <div>{/* περιεχόμενο */}</div>;
};
εξαγωγήσυνθ getStaticProps = ασυγχρονισμός ({ params }) => {
συνθ ανάρτηση = αναμένω getSinglePost (params.slug);
ΕΠΙΣΤΡΟΦΗ {
props: { ...post },
};
};
Η συνάρτηση getStaticProps δημιουργεί τα δεδομένα ανάρτησης που αποδίδονται στη σελίδα. Χρησιμοποιεί το γυμνοσάλιαγκα από τις διαδρομές που δημιουργούνται από τη συνάρτηση getStaticPaths.
Χρήση του getStaticPaths για τη λήψη μονοπατιών
Η συνάρτηση getStaticPaths() επιστρέφει τις διαδρομές για τις σελίδες που θα πρέπει να προ-απόδοση. Αλλάξτε το στοιχείο Post για να το συμπεριλάβετε:
εξαγωγήσυνθ getStaticPaths = ασυγχρονισμός () => {
συνθ paths = getAllPosts().map(({ slug }) => ({ παραμέτρους: { γυμνοσάλιαγκος } }));
ΕΠΙΣΤΡΟΦΗ {
μονοπάτια,
εναλλακτική: ψευδής,
};
};
Αυτή η υλοποίηση του getStaticPaths ανακτά όλες τις αναρτήσεις που πρέπει να αποδοθούν και επιστρέφει τα slugs ως παραμέτρους.
Συνολικά, το [slug].js θα μοιάζει με αυτό:
εισαγωγή { getAllPosts, getSinglePost } από "../../usils/posts";συνθ Δημοσίευση = ({ περιεχόμενο }) => {
ΕΠΙΣΤΡΟΦΗ <div>{περιεχόμενο}</div>;
};εξαγωγήσυνθ getStaticPaths = ασυγχρονισμός () => {
συνθ paths = getAllPosts().map(({ slug }) => ({ παραμέτρους: { γυμνοσάλιαγκος } }));
ΕΠΙΣΤΡΟΦΗ {
μονοπάτια,
εναλλακτική: ψευδής,
};
};εξαγωγήσυνθ getStaticProps = ασυγχρονισμός ({ params }) => {
συνθ ανάρτηση = αναμένω getSinglePost (params.slug);ΕΠΙΣΤΡΟΦΗ {
props: { ...post },
};
};
εξαγωγήΠροκαθορισμένο Θέση;
Πρέπει να χρησιμοποιήσετε τις getStaticProps() και getStaticPaths() μαζί για να δημιουργήσετε μια δυναμική διαδρομή. Η συνάρτηση getStaticPaths() θα πρέπει να δημιουργήσει τις δυναμικές διαδρομές, ενώ η getStaticProps() ανακτά τα δεδομένα που αποδίδονται σε κάθε διαδρομή.
Δημιουργία ένθετων δυναμικών διαδρομών στο Next.js
Για να δημιουργήσετε μια ένθετη διαδρομή στο Next.js, πρέπει να δημιουργήσετε έναν νέο φάκελο μέσα στο φάκελο pages και να αποθηκεύσετε τη δυναμική διαδρομή μέσα σε αυτόν.
Για παράδειγμα, για να δημιουργήσετε /pages/posts/dynamic-routes-nextjs, αποθηκεύστε το [slug].js μέσα /pages/posts.
Πρόσβαση στις παραμέτρους URL από τις δυναμικές διαδρομές
Αφού δημιουργήσετε τη διαδρομή, μπορείτε να ανακτήσετε το Παράμετρος URL από τη δυναμική διαδρομή χρησιμοποιώντας το userRouter() React hook.
Για τις σελίδες/[slug].js, πάρτε το slug ως εξής:
εισαγωγή { useRouter } από 'επόμενο/δρομολογητής'συνθ Δημοσίευση = () => {
συνθ router = userRouter()
συνθ { slug } = router.query
ΕΠΙΣΤΡΟΦΗ <Π>Δημοσίευση: {slug}</Π>
}
εξαγωγήΠροκαθορισμένο Θέση
Αυτό θα εμφανίσει το γυμνοσάλιαγκο της θέσης.
Δυναμική δρομολόγηση με getServerSideProps
Χρησιμοποιώντας το Next.js, μπορείτε να ανακτήσετε δεδομένα κατά το χρόνο δημιουργίας και να δημιουργήσετε δυναμικές διαδρομές. Μπορείτε να χρησιμοποιήσετε αυτήν τη γνώση για να προ-αποδόσετε σελίδες από μια λίστα στοιχείων.
Εάν θέλετε να λαμβάνετε δεδομένα για κάθε αίτημα, χρησιμοποιήστε το getServerSideProps αντί για το getStaticProps. Σημειώστε ότι αυτή η προσέγγιση είναι πιο αργή. θα πρέπει να το χρησιμοποιείτε μόνο όταν καταναλώνετε δεδομένα που αλλάζουν τακτικά.