Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Το Next.js 13 παρουσίασε ένα νέο σύστημα δρομολόγησης χρησιμοποιώντας τον κατάλογο εφαρμογών. Το Next.js 12 παρείχε ήδη έναν εύκολο τρόπο χειρισμού διαδρομών μέσω διαδρομών που βασίζονται σε αρχεία. Η προσθήκη ενός στοιχείου στο φάκελο σελίδων θα το έκανε αυτόματα μια διαδρομή. Σε αυτήν τη νέα έκδοση, ο δρομολογητής που βασίζεται σε σύστημα αρχείων διαθέτει ενσωματωμένη ρύθμιση για διατάξεις, ένθετη δρομολόγηση προτύπων, διεπαφή χρήστη φόρτωσης, διαχείριση σφαλμάτων και υποστήριξη για στοιχεία διακομιστή και ροή.

Αυτό το άρθρο εξηγεί αυτές τις νέες δυνατότητες και γιατί είναι σημαντικές.

Ξεκινώντας με το Next.js 13

Δημιουργήστε το δικό σας έργο Next.js 13 εκτελώντας την ακόλουθη εντολή στο τερματικό.

npx δημιουργώ-Επόμενο-app@latest next13 --πειραματική εφαρμογή

Αυτό θα πρέπει να δημιουργήσει έναν νέο φάκελο που ονομάζεται next13 με τον νέο κατάλογο εφαρμογών.

instagram viewer

Κατανόηση του νέου καταλόγου εφαρμογών

Το Next.js 12 χρησιμοποίησε το σελίδες κατάλογο για δρομολόγηση, αλλά αντικαθίσταται από το app/ κατάλογο στο Next.js 13. ο σελίδες/ κατάλογος εξακολουθεί να λειτουργεί στο Επόμενο 13 για να επιτρέπεται η σταδιακή υιοθέτηση. Χρειάζεται μόνο να βεβαιωθείτε ότι δεν δημιουργείτε αρχεία στους δύο καταλόγους για την ίδια διαδρομή καθώς θα εμφανιστεί ένα σφάλμα.

Εδώ είναι η τρέχουσα δομή του καταλόγου της εφαρμογής.

Στον κατάλογο εφαρμογών, χρησιμοποιείτε φακέλους για να ορίσετε διαδρομές και τα αρχεία μέσα σε αυτούς τους φακέλους χρησιμοποιούνται για τον ορισμό της διεπαφής χρήστη. Υπάρχουν επίσης ειδικά αρχεία όπως:

  • σελίδα.tsx - Το αρχείο που χρησιμοποιείται για τη δημιουργία της διεπαφής χρήστη για μια συγκεκριμένη διαδρομή.
  • διάταξη.tsx - Περιέχει τον ορισμό της διάταξης της διαδρομής και μπορεί να μοιραστεί σε πολλές σελίδες. Είναι ιδανικά για μενού πλοήγησης και πλαϊνές γραμμές. Κατά την πλοήγηση, οι διατάξεις διατηρούν την κατάσταση και δεν αποδίδονται ξανά. Αυτό σημαίνει ότι όταν πλοηγείστε μεταξύ σελίδων που μοιράζονται μια διάταξη, η κατάσταση παραμένει η ίδια. Ένα πράγμα που πρέπει να σημειωθεί είναι ότι πρέπει να υπάρχει μια κορυφαία διάταξη (η διάταξη ρίζας) που να περιέχει όλες τις ετικέτες HTML και σώματος που μοιράζονται σε ολόκληρη την εφαρμογή.
  • template.tsx - Τα πρότυπα είναι σαν διατάξεις, ωστόσο δεν διατηρούν την κατάσταση και αποδίδονται εκ νέου κάθε φορά που χρησιμοποιούνται για τη δημιουργία μιας σελίδας. Τα πρότυπα είναι ιδανικά για καταστάσεις όπου χρειάζεστε συγκεκριμένο κώδικα για εκτέλεση κάθε φορά που προσαρτάται το στοιχείο, για παράδειγμα, εισαγάγετε και βγείτε από κινούμενα σχέδια.
  • error.tsx - Αυτό το αρχείο χρησιμοποιείται για τον χειρισμό σφαλμάτων στην εφαρμογή. Αναδιπλώνει μια διαδρομή με την κλάση ορίου σφάλματος React έτσι ώστε όταν παρουσιαστεί ένα σφάλμα σε αυτήν τη διαδρομή ή στα παιδιά της, να προσπαθεί να ανακτήσει από αυτήν αποδίδοντας μια φιλική προς το χρήστη σελίδα σφάλματος.
  • loading.tsx - Η διεπαφή χρήστη φόρτωσης φορτώνεται αμέσως από τον διακομιστή καθώς η διεπαφή χρήστη διαδρομής φορτώνεται στο παρασκήνιο. Η διεπαφή χρήστη φόρτωσης μπορεί να είναι ένα spinner ή μια οθόνη σκελετού. Μόλις φορτωθεί το περιεχόμενο της διαδρομής, αντικαθιστά τη διεπαφή χρήστη φόρτωσης.
  • not-found.tsx - Το αρχείο που δεν βρέθηκε αποδίδεται όταν το Next.js συναντά a Σφάλμα 404 για αυτήν τη σελίδα. Στο Next.js 12, θα πρέπει να δημιουργήσετε και να ρυθμίσετε με μη αυτόματο τρόπο μια σελίδα 404.
  • head.tsx - Αυτό το αρχείο καθορίζει την ετικέτα κεφαλής για το τμήμα διαδρομής στο οποίο έχει οριστεί.

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

Όπως αναφέρθηκε προηγουμένως, οι διαδρομές δημιουργούνται χρησιμοποιώντας φακέλους στο app/ Ευρετήριο. Μέσα σε αυτόν τον φάκελο, πρέπει να δημιουργήσετε ένα αρχείο που ονομάζεται σελίδα.tsx που ορίζει τη διεπαφή χρήστη της συγκεκριμένης διαδρομής.

Για παράδειγμα, για να δημιουργήσετε μια διαδρομή με τη διαδρομή /products, θα χρειαστεί να δημιουργήσετε ένα app/products/page.tsx αρχείο.

Για ένθετες διαδρομές όπως /products/sale, τοποθετήστε τους φακέλους ο ένας μέσα στον άλλον έτσι ώστε να μοιάζει η δομή του φακέλου app/products/sale/page.tsx.

Εκτός από έναν νέο τρόπο δρομολόγησης, άλλες ενδιαφέρουσες λειτουργίες που υποστηρίζει ο κατάλογος εφαρμογών είναι τα στοιχεία διακομιστή και η ροή.

Χρήση στοιχείων διακομιστή στον Κατάλογο εφαρμογών

Ο κατάλογος της εφαρμογής χρησιμοποιεί στοιχεία διακομιστή από προεπιλογή. Αυτή η προσέγγιση μειώνει την ποσότητα JavaScript που αποστέλλεται στο πρόγραμμα περιήγησης καθώς το στοιχείο αποδίδεται στον διακομιστή. Αυτό βελτιώνει την απόδοση.

Δείτε αυτό το άρθρο για διαφορετικές μεθόδους απόδοσης στο Next.js για μια πιο εμπεριστατωμένη εξήγηση.

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

Μπορείτε επίσης να αλληλεπιδράσετε απευθείας με το backend. Δεν υπάρχει ανάγκη χρήσης getServerSideProps ή getStaticProps καθώς μπορείτε να χρησιμοποιήσετε το async/wait στο στοιχείο διακομιστή για την ανάκτηση δεδομένων.

Σκεφτείτε αυτήν τη συνάρτηση ασυγχρονισμού που ανακτά δεδομένα από ένα API.

ασυγχρονισμόςλειτουργίαgetData() {
δοκιμάστε{
συνθ res = αναμένω φέρω(' https://api.example.com/...');
ΕΠΙΣΤΡΟΦΗ res.json();
 } σύλληψη(λάθος) {
βολήνέοςΛάθος("Δεν ήταν δυνατή η ανάκτηση δεδομένων")
 }
}

Μπορείτε να το καλέσετε απευθείας σε μια σελίδα ως εξής:

εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαΣελίδα() {
συνθ δεδομένα = αναμένω getData();
ΕΠΙΣΤΡΟΦΗ<div>div>;
}

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

Σταδιακή ροή στοιχείων στον Κατάλογο εφαρμογών

Η ροή αναφέρεται στην σταδιακή αποστολή τμημάτων της διεπαφής χρήστη στον πελάτη έως ότου αποδοθούν όλα τα στοιχεία. Αυτό επιτρέπει στον χρήστη να δει μέρος του περιεχομένου ενώ το υπόλοιπο αποδίδεται. Για να προσφέρετε στους χρήστες καλύτερη εμπειρία, αποδώστε ένα στοιχείο φόρτωσης σαν spinner μέχρι ο διακομιστής να ολοκληρώσει την απόδοση του περιεχομένου. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας δύο τρόπους:

  • Δημιουργία α φόρτωση.tsx αρχείο που θα αποδοθεί για ολόκληρο το τμήμα της διαδρομής. 
εξαγωγήΠροκαθορισμένολειτουργίαΦόρτωση() {
ΕΠΙΣΤΡΟΦΗ<Π>Φόρτωση...Π>
}
  • Αναδίπλωση μεμονωμένων στοιχείων με το όριο React Suspense και καθορισμός μιας εναλλακτικής διεπαφής χρήστη. 
εισαγωγή { Αναστολή } από"αντιδρώ";
εισαγωγή { Προϊόντα } από"./Συστατικά";
εξαγωγήΠροκαθορισμένολειτουργίαΠώληση() {
ΕΠΙΣΤΡΟΦΗ (
<Ενότητα>
Προϊόντα...
}>
<Προϊόντα />
Αγωνία>
Ενότητα>
 );
}

Προτού αποδοθεί το στοιχείο Προϊόντα, ο χρήστης θα δει "Προϊόντα...". Αυτό είναι καλύτερο από μια κενή οθόνη όσον αφορά την εμπειρία χρήστη.

Αναβάθμιση σε Next.js 13

Ο νέος κατάλογος εφαρμογών είναι σίγουρα μια βελτίωση από τον κατάλογο των προηγούμενων σελίδων. Περιλαμβάνει ειδικά αρχεία όπως διάταξη, κεφαλή, πρότυπο, σφάλμα, μη εύρεση και φόρτωση που χειρίζονται διαφορετικές καταστάσεις κατά την απόδοση μιας διαδρομής χωρίς να απαιτείται μη αυτόματη ρύθμιση.

Επιπλέον, ο κατάλογος εφαρμογών υποστηρίζει επίσης ροή και στοιχεία διακομιστή που οδηγούν σε βελτιωμένη απόδοση. Αν και αυτές οι λειτουργίες είναι εξαιρετικές τόσο για τους χρήστες όσο και για τους προγραμματιστές, οι περισσότερες από αυτές είναι επί του παρόντος σε έκδοση beta.

Ωστόσο, μπορείτε ακόμα να κάνετε αναβάθμιση στο Next.js 13 καθώς ο κατάλογος σελίδων εξακολουθεί να λειτουργεί και, στη συνέχεια, ξεκινήστε να χρησιμοποιείτε τον κατάλογο της εφαρμογής με τον δικό σας ρυθμό.