Βασική αρχή λειτουργίας του πλαισίου NextJS

Στα προηγούμενα μαθήματα εγκαταστήσαμε το πλαίσιο NextJS και γνωριστήκαμε με τη βασική του δομή. Ήρθε η ώρα να ασχοληθούμε με την κύρια εργασία.

Το κύριο μέρος του NextJS είναι η δρομολόγηση. Η δρομολόγηση λειτουργεί ως εξής: όταν ο χρήστης πληκτρολογεί στη γραμμή διευθύνσεων του προγράμματος περιήγησης κάποια URL, το πλαίσιο NextJS θα παρέχει στο πρόγραμμα περιήγησης ένα συγκεκριμένο αρχείο, που αντιστοιχεί σε αυτήν τη διεύθυνση URL.

Η δρομολόγηση στο NextJS είναι οργανωμένη με έναν ιδιαίτερο τρόπο. Η ουσία της έγκειται στο ότι κάθε URL που ζητείται αντιστοιχεί σε κάποιο φάκελο μέσα στο src/app.

Ταυτόχρονα, μέσα στον φάκελο πρέπει να υπάρχει ένα αρχείο με το όνομα page.jsx. Ακριβώς αυτό το αρχείο θα παρέχεται στο πρόγραμμα περιήγησης. Επιπλέον, σε αυτό το αρχείο θα γράφουμε κώδικα σε JSX, ενώ στο πρόγραμμα περιήγησης θα αποστέλλεται ο έτοιμος κώδικας HTML της σελίδας.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι θέλουμε, στη διεύθυνση URL /test/ να εμφανίζεται κάποιο κείμενο.

Ας δημιουργήσουμε τον αντίστοιχο φάκελο: src/app/test. Μέσα σε αυτόν τον φάκελο, ας φτιάξουμε το αρχείο page.jsx με το ακόλουθο περιεχόμενο:

Ανοίξτε στο πρόγραμμα περιήγησης τη διεύθυνσή μας: /test. Και θα δείτε το κείμενο που γράψαμε μέσα στο αρχείο JSX.

Δοκιμάστε να αλλάξετε το κείμενο και να αποθηκεύσετε το αρχείο. Μετά από αυτό, το κείμενο θα αλλάξει αυτόματα και στο πρόγραμμα περιήγησης. Έτσι λειτουργεί το NextJS στη λειτουργία ανάπτυξης.