Εισαγωγή από τη ρίζα του site στο NextJS

Σε αυτό το μάθημα θα συνεχίσουμε να μελετάμε τις εισαγωγές στο NextJS. Αλλά τώρα θα μελετήσουμε ένα feature που υπάρχει στο NextJS, αλλά απουσιάζει από το NodeJS.

Το γεγονός είναι ότι στο NodeJS κατά την εισαγωγή μπορούμε να χρησιμοποιήσουμε είτε σχετικές διαδρομές (χωρίς αρχικό slash), είτε απόλυτες διαδρομές από τη ρίζα του λειτουργικού συστήματος (δημιουργεί προβλήματα με τη μεταφορά του project σε άλλο υπολογιστή).

Στην πραγματική ζωή, ωστόσο, χρειαζόμαστε ακόμα έναν τύπο εισαγωγής - από τη ρίζα του project. Αυτή η εισαγωγή δεν είναι ενσωματωμένη στο NodeJS, αλλά υπάρχει στο NextJS.

Αυτή η εισαγωγή ενεργοποιείται κατά την εγκατάσταση του NextJS. Θυμάστε, υπήρχε η ερώτηση Would you like to customize the default import alias? Αν απαντήσετε Yes, τότε θα έχουμε τη δυνατότητα να ορίσουμε εισαγωγές από τη ρίζα του project.

Ας δούμε πώς γίνεται αυτό. Ας πούμε για παράδειγμα ότι έχουμε την ακόλουθη δομή αρχείων:

/src/
- data.js
- /app/
  - /test/
    - page.jsx

Όπως βλέπετε, το αρχείο data.js βρίσκεται μακριά από το αρχείο page.jsx. Ας εισάγουμε το αρχείο δεδομένων μας στο αρχείο της σελίδας. Ας χρησιμοποιήσουμε για αυτό τη σχετική διαδρομή:

import data from '../../data.js';

export default function Test() {
	return <h1>Test</h1>;
}

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

Πιο βολικό θα ήταν να καθορίσουμε τη διαδρομή προς το αρχείο δεδομένων από τη ρίζα του project (θεωρείται ότι είναι ο φάκελος src). Για να γίνει αυτό, στην αρχή της διαδρομής πρέπει να γράψουμε το σύμβολο @. Ας το κάνουμε:

import data from '@/data.js';

export default function Test() {
	return <h1>Test</h1>;
}

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

Δίνεται η ακόλουθη δομή αρχείων:

/src/
- /app/
  - data.js
  - /test/
    - page.jsx

Εισάγετε το αρχείο δεδομένων στο component Test. Κατά την εισαγωγή, καθορίστε τη διαδρομή από τη ρίζα του project.

Αλλάξτε τη δομή αρχείων σας στην ακόλουθη:

/src/
- /app/
  - data.js
  - /test/
    - /sub/
      - page.jsx

Βεβαιωθείτε ότι η εισαγωγή από τη ρίζα του project εξακολουθεί να λειτουργεί χωρίς προβλήματα.