Importação a partir da raiz do site no NextJS

Nesta lição, vamos continuar estudando as importações no NextJS. Mas agora vamos estudar um recurso que existe no NextJS, mas está ausente no NodeJS.

O fato é que no NodeJS, ao importar, podemos usar caminhos relativos (sem a barra inicial) ou caminhos absolutos a partir da raiz do sistema operacional (o que cria problemas ao mover o projeto para outro computador).

Na vida real, no entanto, precisamos de mais um tipo de importação - a partir da raiz do projeto. O NodeJS não tem essa importação embutida, mas o NextJS tem.

Esta importação é habilitada durante a instalação do NextJS. Lembra, havia a pergunta Would you like to customize the default import alias? Se você responder Sim, teremos a capacidade de definir importações a partir da raiz do projeto.

Vamos ver como isso é feito. Suponha, por exemplo, que temos a seguinte estrutura de arquivos:

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

Como você pode ver, o arquivo data.js está longe do arquivo page.jsx. Vamos importar nosso arquivo de dados para o arquivo da página. Vamos usar um caminho relativo para isso:

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

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

Como você pode ver, a importação por caminho relativo não é muito conveniente, pois temos que começar o caminho com ../. Além disso, se movermos nosso componente para outro local, o caminho para o arquivo de dados quebrará.

Seria mais conveniente especificar o caminho para o arquivo de dados a partir da raiz do projeto (considera-se a pasta src). Para isso, precisamos escrever o símbolo @ no início do caminho. Vamos fazer isso:

import data from '@/data.js';

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

Enfatizo novamente que esse tipo de importação é possível especificamente no NextJS e somente se durante a instalação você respondeu corretamente à pergunta necessária. Isso simplesmente não funcionará no NodeJS puro ou no JavaScript vanilla.

Dada a seguinte estrutura de arquivos:

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

Importe o arquivo de dados no componente Test. Na importação, especifique o caminho a partir da raiz do projeto.

Altere sua estrutura de arquivos para a seguinte:

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

Certifique-se de que a importação a partir da raiz do projeto continua funcionando sem problemas.