Πίνακας περιεχομένων[Κρύβω][Προβολή]
Κατά την επιλογή μιας βιβλιοθήκης λογισμικού ή ενός πλαισίου, συνήθως λαμβάνεται υπόψη η εμπειρία του προγραμματιστή.
Όταν αναφέρω την "εμπειρία προγραμματιστή", αναφέρομαι στο πώς οι προγραμματιστές κάνουν πραγματικά τη δουλειά. Οι προγραμματιστές επιλέγουν βιβλιοθήκες ή πλαίσια που είναι ευχάριστα στη χρήση.
Αυτός είναι ένας από τους κύριους λόγους για τους οποίους έχουμε τώρα τις πιο δημοφιλείς βιβλιοθήκες και πλαίσια. Ως προγραμματιστές, δεν χρειάζεται να ξεκινήσουμε από το μηδέν όταν υπάρχουν υπάρχοντα εργαλεία που δημιουργήθηκαν για να μας βοηθήσουν στις εργασίες μας.
Τα Frameworks είναι κομμάτια λογισμικού που δημιουργούνται και χρησιμοποιούνται από προγραμματιστές για την κατασκευή εφαρμογών, και το NextJS είναι ένα από αυτά.
Σε αυτήν την ανάρτηση, θα εξετάσουμε το Nextjs, τις βασικές του δυνατότητες και πώς μπορούμε να το χρησιμοποιήσουμε για να δημιουργήσουμε μια εφαρμογή. Ας πηδήξουμε αμέσως.
Τι είναι το Next.js;
Next.js είναι ένα πλαίσιο JavaScript για γρήγορη και εύκολη κατασκευή στατικών ιστοσελίδων και διαδικτυακών εφαρμογών που βασίζονται σε React. Σας επιτρέπει να σχεδιάζετε εξαιρετικές εφαρμογές Ιστού για διάφορες πλατφόρμες, συμπεριλαμβανομένων των Windows, Linux και Mac.
Θα πρέπει να είστε εξοικειωμένοι με το πλαίσιο Next.js εάν έχετε ελάχιστη εξοικείωση με το react και θέλετε να μάθετε περισσότερα για το οικοσύστημα του react.
Παρόλο που το Next.js διαθέτει όλα όσα χρειάζεστε για να ξεκινήσετε, μπορείτε να επιλέξετε μεταξύ NPM και Yarn, JavaScript και TypeScript, CSS και SCSS, στατικής εξαγωγής και ανάπτυξης χωρίς διακομιστή.
Χαρακτηριστικά
- Η δρομολόγηση γίνεται αυτόματα – Δεν χρειάζεται να διαμορφώσετε τίποτα επειδή οποιαδήποτε διεύθυνση URL αντιστοιχίζεται στο σύστημα αρχείων, στα αρχεία στον φάκελο σελίδων (φυσικά έχετε επιλογές προσαρμογής).
- Στοιχεία ενός μεμονωμένου αρχείου – Είναι απλό να προσθέσετε στυλ με εμβέλεια στο στοιχείο χρησιμοποιώντας το styled-jsx, το οποίο είναι πλήρως ενσωματωμένο και παράγεται από την ίδια ομάδα.
- Επαναφόρτωση ενός Hot Code – Όταν το Next.js εντοπίσει μια τροποποίηση που είναι αποθηκευμένη στο δίσκο, φορτώνει ξανά τη σελίδα.
- Dynamic Components – Μπορείτε να φορτώσετε δυναμικά modules JavaScript και React Components.
- Στατικές εξαγωγές – Το Next.js σάς επιτρέπει να εξάγετε έναν εντελώς στατικό ιστότοπο από την εφαρμογή σας με την επόμενη εντολή εξαγωγής.
- Συμβατότητα με το περιβάλλον – Το Next.js ενσωματώνεται απρόσκοπτα με τα οικοσυστήματα JavaScript, Node και React.
- Αυτόματη διαίρεση κωδικών – Μόνο οι βιβλιοθήκες και η JavaScript που απαιτούνται χρησιμοποιούνται για την απόδοση σελίδων. Αντί να δημιουργήσει ένα μόνο αρχείο JavaScript που περιέχει όλο τον κώδικα της εφαρμογής, το Next.js χωρίζει έξυπνα την εφαρμογή σε πολλούς πόρους.
Πώς να δημιουργήσετε μια εφαρμογή next.js;
Εγκατάσταση
Μπορείτε να χρησιμοποιήσετε την εντολή node npx για να εγκαταστήσετε και να δημιουργήσετε ένα έργο Next.js.
Αυτό θα δημιουργήσει έναν φάκελο και όλα τα αρχεία, τις διαμορφώσεις και άλλα στοιχεία που απαιτούνται για την εκτέλεση ενός έργου Next.js.
Μπορείτε να εκκινήσετε την εφαρμογή μόλις δημιουργηθεί.
Σελίδες & Δρομολόγηση
Για να χειριστούμε διαδρομές με το Next.js, δεν χρειάζεται να χρησιμοποιήσουμε ένα πλαίσιο δρομολόγησης. Η δρομολόγηση με το Next.js είναι παιχνιδάκι. Όταν χρησιμοποιείτε την εντολή δημιουργίας-επόμενης εφαρμογής για να δημιουργήσετε μια νέα εφαρμογή Next.js, η εφαρμογή δημιουργεί έναν φάκελο που ονομάζεται "σελίδες" από προεπιλογή.
Αυτός ο φάκελος "σελίδες" είναι όπου διατηρείτε τις διαδρομές σας. Ως αποτέλεσμα, κάθε αρχείο συστατικών αντιδράσεων στον υποκατάλογο θα αντιμετωπίζεται ως ξεχωριστή διαδρομή.
Για παράδειγμα, εάν ο φάκελος περιέχει αυτά τα αρχεία:
- index.js
- περίπου.js
- aricles.js
Αυτό το αρχείο θα μετατραπεί αυτόματα με τρεις τρόπους:
- Η σελίδα ευρετηρίου localhost/index
- Η σελίδα σχετικά με το localhost/about
- Η σελίδα ιστολογίου localhost/άρθρα
Ένα παράδειγμα σελίδας about.js φαίνεται παρακάτω. Δεν παρέχεται τίποτα σχετικά με τη σελίδα, όπως μπορείτε να δείτε. Είναι απλώς ένα τυπικό λειτουργικό εξάρτημα React.
διαδρομές
Για να δημιουργήσετε ένθετες διαδρομές, πρέπει πρώτα να δημιουργήσετε έναν υποφάκελο. Για παράδειγμα: σελίδες/άρθρα. Δημιουργήστε το στοιχείο react 'contact.js' σε αυτόν τον φάκελο και θα δημιουργήσει τη σελίδα localhost/articles/contact.
Εάν τοποθετήσετε ένα αρχείο στο pages/articles.js και ένα άλλο στο pages/articles/index.js. Και τα δύο αντικατοπτρίζουν την ίδια διαδρομή localhost/blog. Σε αυτήν την περίπτωση, το Next.js θα αποδώσει απλώς το αρχείο article.js. Τι γίνεται με τις δυναμικές διαδρομές, στις οποίες κάθε ανάρτηση ιστολογίου έχει τη δική της διαδρομή:
- localhost/blog/first-article
- localhost/blog/-δεύτερο άρθρο
Χρησιμοποιώντας τη σημείωση παρενθέσεων, μπορείτε να ορίσετε μια δυναμική διαδρομή στο Next.js. Για παράδειγμα: pages/article/[slug].js
Διαδρομές σύνδεσης
Ολοκληρώσατε τώρα την πρώτη σας διαδρομή. Υποθέτω ότι ρωτάτε πώς να συνδέσετε σελίδες σε αυτές τις διαδρομές. Θα χρειαστείτε «επόμενο/σύνδεσμος» για να το κάνετε.
Ακολουθεί ένα παράδειγμα αρχικής σελίδας που περιλαμβάνει έναν σύνδεσμο προς τη σελίδα Πληροφορίες:
Εάν θέλετε να δημιουργήσετε στυλ στον σύνδεσμο, χρησιμοποιήστε την ακόλουθη σύνταξη:
Ανακατεύθυνση Διαδρομών
Τι γίνεται αν χρειαστεί να αναγκάσετε μια ανακατεύθυνση σε μια συγκεκριμένη σελίδα; Για παράδειγμα, όταν πατιέται ένα κουμπί; Μπορείτε να το πετύχετε χρησιμοποιώντας το 'router.push':
SEO
Οι σελίδες σε εφαρμογές ιστού απαιτούν στοιχεία meta (κεφαλής) εκτός από δεδομένα εντός του σώματος HTML. Αυτό θα απαιτήσει την εγκατάσταση μιας επιπλέον απαίτησης που ονομάζεται React Helmet σε μια εφαρμογή React.
Μπορούμε να χρησιμοποιήσουμε το στοιχείο Head από το επόμενο/κεφάλι στο Next για να προσθέσουμε εύκολα μεταδεδομένα στις ιστοσελίδες μας που θα εμφανίζονται στα αποτελέσματα αναζήτησης και στις ενσωματώσεις:
εξαρτήματα
Θα χρειαστεί συχνά να αναπτύξετε στοιχεία ή ένα αρχείο διάταξης. Για παράδειγμα, ένα στοιχείο που αποδίδει τη γραμμή πλοήγησης. Μόλις χρησιμοποιήσαμε τον φάκελο σελίδων μέχρι στιγμής. Τι γίνεται αν το στοιχείο σας δεν προορίζεται να είναι σελίδα διαδρομής;
Δεν θέλετε ο χρήστης να πλοηγηθεί σε μια σελίδα όπως ένα localhost/navbar. Εάν τοποθετήσετε το στοιχείο Navbar.js στο φάκελο pages, αυτό θα συμβεί. Τι πρέπει να κάνετε στην περίπτωση;
Απλώς αποθηκεύστε όλα τα στοιχεία "not a page" σε ξεχωριστό φάκελο. Τα περισσότερα έργα Next.js χρησιμοποιούν το ψευδώνυμο 'components' και αυτός ο φάκελος δημιουργείται στον ριζικό φάκελο του έργου σας.
Εξάρτημα κεφαλής
Η αρχική φόρτωση σελίδας αποδίδεται από το Next.js στην πλευρά του διακομιστή. Αυτό το κάνει τροποποιώντας το HTML της σελίδας σας. Περιλαμβάνεται το τμήμα κεφαλίδας.
Το στοιχείο Next.js Head χρησιμοποιείται για να δώσει ετικέτες ενότητας κεφαλίδας όπως τίτλος και meta. Το στοιχείο Head χρησιμοποιείται σε αυτό το παράδειγμα ενός στοιχείου Layout.
Δημιουργία 404 σελίδας δεν βρέθηκε
Είναι εφικτό να δημιουργήσετε τη δική σας σελίδα σφάλματος 404. Ίσως θέλετε να προσαρμόσετε το μήνυμα ή να προσθέσετε το δικό σας σχέδιο σελίδας. Στο φάκελο pages, δημιουργήστε το αρχείο 404.js.
Όταν παρουσιαστεί ένα σφάλμα 404, το Next.js θα ανακατευθύνει αυτόματα σε αυτήν τη σελίδα. Ακολουθεί ένα παράδειγμα εξατομικευμένης σελίδας 404:
Ανάκτηση δεδομένων από την πλευρά του διακομιστή
Αντί να κάνετε λήψη δεδομένων από την πλευρά του πελάτη, το Next.js σάς επιτρέπει να διεξάγετε έναν αρχικό πληθυσμό δεδομένων, που συνεπάγεται την αποστολή της σελίδας με τα δεδομένα που έχουν ήδη συμπληρωθεί από τον διακομιστή.
Έχετε δύο επιλογές για την υλοποίηση της ανάκτησης δεδομένων από την πλευρά του διακομιστή:
- Τα δεδομένα πρέπει να λαμβάνονται για κάθε αίτημα.
- Λάβετε δεδομένα μόνο μία φορά σε όλη τη διαδικασία κατασκευής (στατική τοποθεσία)
Λήψη δεδομένων για κάθε αίτημα
Η μέθοδος getServerSideProps χρησιμοποιείται για την απόδοση κάθε αιτήματος από την πλευρά του διακομιστή. Αυτή η λειτουργία μπορεί να συμπεριληφθεί στο τέλος του αρχείου συστατικού σας. Το Next.js θα συμπληρώσει αυτόματα τα στηρίγματα των στοιχείων σας με το αντικείμενο getServerSideProps εάν αυτή η συνάρτηση υπάρχει στο αρχείο συστατικού σας.
Λήψη δεδομένων κατά το χρόνο κατασκευής
Η μέθοδος getStaticProps χρησιμοποιείται για την απόδοση από την πλευρά του διακομιστή κατά το χρόνο κατασκευής. Αυτή η λειτουργία μπορεί να συμπεριληφθεί στο τέλος του αρχείου συστατικού σας. Αυτή η μέθοδος εκτελεί τον κώδικα διακομιστή και στέλνει ένα αίτημα GET στον διακομιστή, αλλά μόνο μία φορά όταν ολοκληρωθεί το έργο μας.
Γιατί πρέπει να μάθετε Next.js;
Ένας από τους λόγους για αυτό είναι επειδή το Next.js είναι χτισμένο πάνω από το React, ένα κιτ εργαλείων ανάπτυξης front-end για δημιουργία διεπαφών χρήστη που είναι η αγαπημένη μου επιλογή για το σχεδιασμό εφαρμογών ιστού.
Αλλά δεν θα ήταν αρκετό αν το Next.js δεν ήταν καλό σε αυτό που έκανε… σωστά;
Λοιπόν, τι ακριβώς κάνει;
Πρέπει πρώτα να ορίσουμε μερικές έννοιες για να το κατανοήσουμε. Το Next.js απέκτησε δημοτικότητα επειδή έλυσε ένα πρόβλημα που είχαν πολλοί προγραμματιστές ιστού με τις εφαρμογές ιστού από την πλευρά του πελάτη (στο πρόγραμμα περιήγησης). Αυτές οι Εφαρμογές μίας σελίδας (SPA) είχαν καλύτερη εμπειρία, καθώς δεν χρειαζόταν ο χρήστης να επαναφορτώσει τη σελίδα και επέτρεψαν περισσότερη διαδραστικότητα.
Ωστόσο, επειδή το μεγαλύτερο μέρος του υλικού σε μια εφαρμογή όπως αυτή γίνεται ορατό μόνο όταν εκτελείται στο πρόγραμμα περιήγησης, οι ανιχνευτές ιστού δυσκολεύονται να κατανοήσουν το περιεχόμενο κειμένου μιας τέτοιας εφαρμογής.
Ως αποτέλεσμα, παρά τη δημοτικότητά τους, πολλά SPA παρέμειναν σε μεγάλο βαθμό ανώνυμα σε μεγάλες μηχανές αναζήτησης όπως η Google. Το Next.js περιλαμβάνει πλέον έναν πιο ισχυρό ενσωματωμένο μηχανισμό για απόδοση από την πλευρά του διακομιστή (SSR) των στοιχείων React.
Το Next.js επιτρέπει στους προγραμματιστές να κατασκευάζουν κώδικα JavaScript στον διακομιστή κατά τη διάρκεια της διαδικασίας δημιουργίας και να παρέχουν βασικό, ευρετήριο HTML στον χρήστη.
ΥΠΕΡ
- Εξαιρετικό για εμπειρία χρήστη
- Εξαιρετικό για SEO
- Δημιουργήστε έναν εξαιρετικά γρήγορο στατικό ιστότοπο που συμπεριφέρεται σαν δυναμικός
- Ευελιξία στη δημιουργία UI & UX.
- Πολλά αναπτυξιακά πλεονεκτήματα
- Μεγάλη κοινοτική υποστήριξη
ΚΑΤΑ
- Οι ιστότοποι ή οι εφαρμογές έχουν ορισμένο χρόνο για κατασκευή ή ανάπτυξη.
- Για ορισμένες εργασίες, το Next.js είναι ανεπαρκές. Οι προγραμματιστές θα πρέπει να μπορούν να κατασκευάζουν δυναμικές διαδρομές χρησιμοποιώντας εργαλεία Node.js.
Συμπέρασμα
Όπως μπορείτε να δείτε, το Next.js απλοποιεί την ανάπτυξη εφαρμογών React και σας επιτρέπει να εστιάσετε σε αυτό που έχει μεγαλύτερη σημασία – τη λογική της εφαρμογής σας και τη διεπαφή χρήστη. Περιλαμβάνει όλα όσα χρειάζονται για τη δημιουργία σύγχρονων εφαρμογών, πλούσιες σε frontend και με API.
Είναι επίσης κατάλληλο για έργα μόνο περιεχομένου, όπως ιστολόγια και ιστότοπους επιχειρήσεων, λόγω της ικανότητάς του να δημιουργεί στατικές σελίδες HTML.
Με τις τρέχουσες εκδόσεις, το Next.js όχι μόνο διατηρεί υψηλό επίπεδο εμπειρίας προγραμματιστή, αλλά παρέχει επίσης εργαλεία για την αύξηση της οπτικής απόδοσης και της εμπειρίας χρήστη, διασφαλίζοντας ένα λαμπρό μέλλον για αυτό το πλαίσιο.
Αφήστε μια απάντηση