Importación desde la raíz del sitio en NextJS

En esta lección, continuaremos estudiando las importaciones en NextJS. Pero ahora estudiaremos una característica que está en NextJS, pero falta en NodeJS.

El caso es que en NodeJS al importar podemos usar rutas relativas (sin barra inicial), o rutas absolutas desde la raíz del sistema operativo (crea problemas al mover el proyecto a otra computadora).

En la vida real, sin embargo, necesitamos otro tipo de importación: desde la raíz del proyecto. NodeJS no tiene esta importación incorporada, pero sí está en NextJS.

Esta importación se activa al instalar NextJS. ¿Recuerdan que había una pregunta Would you like to customize the default import alias? Si responden Yes, tendremos la capacidad de establecer importaciones desde la raíz del proyecto.

Veamos cómo se hace. Supongamos como ejemplo que tenemos la siguiente estructura de archivos:

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

Como pueden ver, el archivo data.js está lejos del archivo page.jsx. Importemos nuestro archivo de datos al archivo de la página. Usemos para esto una ruta relativa:

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

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

Como pueden ver, la importación mediante ruta relativa no es muy conveniente, ya que tenemos que comenzar la ruta con ../. Además, si movemos nuestro componente a otro lugar, la ruta al archivo de datos se romperá.

Sería más conveniente especificar la ruta al archivo de datos desde la raíz del proyecto (se considera la carpeta src). Para ello, necesitamos escribir el símbolo @ al principio de la ruta. Hagámoslo:

import data from '@/data.js';

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

Vuelvo a subrayar que esta importación es posible precisamente en NextJS y solo si durante la instalación respondiste correctamente a la pregunta necesaria. Esto no funcionará en NodeJS o en JavaScript puro.

Dada la siguiente estructura de archivos:

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

Importe el archivo de datos en el componente Test. Al importar, especifique la ruta desde la raíz del proyecto.

Cambie su estructura de archivos a la siguiente:

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

Asegúrese de que la importación desde la raíz del proyecto siga funcionando sin problemas.