Το Next.js είναι ένα πλαίσιο React για απόδοση από διακομιστή, την οποία οι δημιουργοί της παρουσιάζουν ως αλυσίδα εργαλείων μιας εντολής μηδενικής διαμόρφωσης για εφαρμογές React.
Αυτό το πλαίσιο παρέχει μια κοινή δομή που σας επιτρέπει να δημιουργήσετε εύκολα μια εφαρμογή React front-end και διαχειρίζεται με διαφάνεια την απόδοση από την πλευρά του διακομιστή. Η έκδοση 9.3 του Next.js κυκλοφόρησε τη Δευτέρα με νέες δυνατότητες και κάποιες βελτιώσεις, από τις οποίες μπορούμε να βρούμε τη δυνατότητα δημιουργίας στατικών ιστότοπων ως την κύρια καινοτομία.
Τι νέο υπάρχει στο Next.js 9.3;
Με την κυκλοφορία του Next.js 9.0, το πλαίσιο εισήγαγε την έννοια της στατικής αυτόματης βελτιστοποίησης. όταν ένας Η σελίδα δεν έχει απαιτήσεις αποκλεισμού ανάκτηση δεδομένων όπως getInitialProps, θα αποδίδεται αυτόματα σε HTML μόλις κατασκευαστεί.
Υπάρχουν και άλλες περιπτώσεις όπου μπορεί να θέλετε να δημιουργήσετε μια σελίδα σε στατικό HTML κατά τη στιγμή της μεταγλώττισης, ακόμη και με τις απαιτήσεις εξαγωγής δεδομένων αποκλεισμού. Αυτό ισχύει, για παράδειγμα, σε σελίδες μάρκετινγκ τροφοδοτείται από ένα σύστημα διαχείρισης περιεχομένου (CMS).
Το Next.js 9.3 εισάγει δύο νέες μεθόδους ανάκτησης δεδομένων: getStaticProps και getServerSideProps.
Αυτές οι νέες μέθοδοι έχουν πολλά πλεονεκτήματα σε σχέση με το μοντέλο getInitialPropsκαθώς υπάρχει σαφής διάκριση μεταξύ του τι θα γίνει SSG (Static Side Generation) και SSR (Server Side Rendering). Είναι προσθήκες API.
Όλες οι νέες δυνατότητες είναι συμβατές προς τα πίσω και μπορούν να υιοθετηθούν σταδιακά. Δεν υπάρχει απόσβεση και το getInitialProps συνεχίζει να λειτουργεί κανονικά. Προστέθηκε μια παράμετρος getStaticPaths για τη λήψη δυναμικής δρομολόγησης.
- getStaticProps: επιτρέπει τη λήψη δεδομένων κατά τη διάρκεια της κατασκευής.
- getStaticPaths - Προσδιορίστε δυναμική δρομολόγηση βάσει δεδομένων.
- getServerSideProps: σας επιτρέπει να λαμβάνετε δεδομένα για κάθε αίτημα.
Μια άλλη αλλαγή που ξεχωρίζει από αυτήν τη νέα έκδοση είναι η υποστήριξη για τη λειτουργία προεπισκόπησης. Παρουσιάζουμε το getStaticProps στο Next.js ανοίγει νέες δυνατότητες, όπως η χρήση δυνατοτήτων απόδοσης Next.js κατ 'απαίτηση υπό ορισμένες συνθήκες.
Π.χ. κατά την προεπισκόπηση ενός προχείρου Σε ένα CMS, θα θελήσετε να παραλείψετε τη στατική απόδοση και απόδοση σελίδας κατ 'απαίτηση με πρόχειρο περιεχόμενο αντί του δημοσιευμένου περιεχομένου. Θέλετε το Next.js να παραλείψει τη στατική έκδοση μόνο σε αυτήν τη συγκεκριμένη περίπτωση. Σύμφωνα με την ομάδα Next.js, η λειτουργία προεπισκόπησης σάς επιτρέπει να το κάνετε αυτό.
Η λειτουργία του Η προεπισκόπηση επιτρέπει στους χρήστες να παραλείψουν τη σελίδα που δημιουργήθηκε στατικά για να επιστρέψει κατόπιν αιτήματος (SSR) μια πρόχειρη σελίδα, για παράδειγμα από ένα CMS. Ωστόσο, δεν περιορίζεται σε ορισμένα συστήματα CMS. Η λειτουργία προεπισκόπησης ενσωματώνεται απευθείας με τα getStaticProps και getServerSideProps, ώστε να μπορεί να χρησιμοποιηθεί με οποιονδήποτε τύπο λύσης ανάκτησης δεδομένων.
Το Next.js 9.2 πρόσθεσε υποστήριξη για ενσωματωμένο CSS, αλλά το Next.js 9.3 πρόσθεσε υποστήριξη για το Sass. Υποστηρίζονται καθολικά φύλλα στυλ και λειτουργικές μονάδες CSS, καθώς και ενσωματωμένο CSS. Το Next.js υποστηρίζει τώρα μονάδες CSS με αρχεία Sass χρησιμοποιώντας τη σύμβαση ονομασίας αρχείων [name] .module.scss. Σε αντίθεση με την υποστήριξη που υπήρχε προηγουμένως στο Next.js 5+ με το next-sass, οι παγκόσμιες μονάδες Sass και CSS μπορούν πλέον να συνυπάρχουν.
Ενότητες Το CSS σας επιτρέπει να διαχειριστείτε τοπικά το Sass δημιουργώντας αυτόματα μοναδικά ονόματα τάξεων.
Με την έκδοση 9.0 από Next.js, υπήρχε μια σελίδα που δεν αποδόθηκε αυτόματα σε HTML στατική: 404 σελίδα.
Ο κύριος λόγος πίσω από αυτό είναι ότι η σελίδα σφάλματος που τροφοδοτεί το 404 αντιμετωπίστηκε περισσότερο από το 404. Για παράδειγμα, χειρίστηκε επίσης σφάλματα. Δεδομένου ότι 404 σελίδες αποδίδονται για ανύπαρκτες διαδρομές, Η απόδοση της σελίδας κατ 'απαίτηση θα μπορούσε να οδηγήσει σε υψηλότερο κόστος και υψηλότερο φορτίο υπηρέτης. Η έκδοση 9.3 του Framework βελτιώνει τα πράγματα και προσφέρει αυτόματη στατική βελτιστοποίηση για 404 σελίδες.
Τώρα, όταν το αίτημά σας δεν περιλαμβάνει προσαρμοσμένη σελίδα error.js, το αρχείο Το Next.js δημιουργεί αυτόματα 404 σελίδα στατικά και το χρησιμοποιεί όταν πρέπει να προβάλλεται ένα 404. Αυτό συμβαίνει αυτόματα και δεν απαιτούνται αλλαγές.
Μπορείτε επίσης να προσαρμόσετε αυτήν τη σελίδα. Για να αντικαταστήσετε την προεπιλεγμένη σελίδα 404, μπορεί να δημιουργηθεί ένα αρχείο 404.js.
Αν θέλετε να μάθετε περισσότερα για αυτό, μπορείτε να συμβουλευτείτε τον ακόλουθο σύνδεσμο.