Στη διαδικασία ανάπτυξης διαδικτυακών εφαρμογών, η διαχείριση σελίδων και η πλοήγηση μεταξύ τους είναι μια κρίσιμη πτυχή. Σε αυτήν τη σειρά άρθρων, θα εμβαθύνουμε στις βασικές αρχές της δημιουργίας σελίδων και της εφαρμογής της πλοήγησης στο Next.js. Αυτές οι θεμελιώδεις έννοιες είναι απαραίτητες για τη δημιουργία ευέλικτων και διαχειρίσιμων διαδικτυακών εφαρμογών.
Δημιουργία και εμφάνιση της Πρώτης Σελίδας
Αρχικά, ας καταλάβουμε πώς να δημιουργήσετε και να εμφανίσετε μια απλή σελίδα στο Next.js. Μπορείτε να δημιουργήσετε σελίδες δημιουργώντας αρχεία στον pages κατάλογο του έργου σας. Για παράδειγμα, για να δημιουργήσετε μια σελίδα καλωσορίσματος, μπορείτε να δημιουργήσετε ένα αρχείο με το όνομα welcome.js μέσα στον pages κατάλογο.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
Στο παραπάνω απόσπασμα κώδικα, δημιουργήσαμε μια απλή σελίδα καλωσορίσματος. Όταν αποκτήσετε πρόσβαση στη /welcome διαδρομή στο πρόγραμμα περιήγησής σας, θα δείτε το μήνυμα "Καλώς ήρθατε στο Next.js !" εκτεθειμένος.
Βασικός Routing
Next.js προσφέρει ένα ισχυρό και διαισθητικό routing σύστημα που διευκολύνει την πλοήγηση μεταξύ σελίδων. Routing in Next.js βασίζεται στον pages κατάλογο, με κάθε αρχείο σε αυτόν τον κατάλογο να αντιστοιχεί σε μια συγκεκριμένη διαδρομή. Για παράδειγμα, ένα αρχείο με όνομα about.js στον pages κατάλογο θα δημιουργήσει μια σελίδα προσβάσιμη στη /about διαδρομή.
Δημιουργία συνδέσμων και πλοήγησης
Για να δημιουργήσουμε συνδέσμους μεταξύ σελίδων και να πλοηγηθούμε μεταξύ τους, μπορούμε να χρησιμοποιήσουμε το <Link> στοιχείο από τη next/link βιβλιοθήκη. Παρακάτω είναι ένα παράδειγμα δημιουργίας συνδέσμου από τη σελίδα καλωσορίσματος στη σελίδα για εμάς.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
Στο παραπάνω παράδειγμα, όταν κάνετε κλικ στο σύνδεσμο "Μάθετε περισσότερα για εμάς", θα ανακατευθυνθείτε στη /about σελίδα.
συμπέρασμα
Σε αυτήν την ενότητα, εξερευνήσαμε πώς να δημιουργήσετε και να εμφανίσετε απλές σελίδες Next.js και πώς να εφαρμόσετε την πλοήγηση μεταξύ σελίδων χρησιμοποιώντας τον pages κατάλογο και το <Link> στοιχείο. Αυτά είναι κρίσιμα αρχικά βήματα για τη δημιουργία μιας Next.js εφαρμογής. Στα επόμενα άρθρα, θα συνεχίσουμε να εξερευνούμε άλλες πτυχές για Next.js τη δημιουργία δυναμικών και διαδραστικών εφαρμογών ιστού.