Importação absoluta de arquivos em projetos com NextJS

Criar uma boa estrutura para o projeto é essencial para que nossa aplicação cresça organizada e seja fácil de localizarmos o que necessitamos, principalmente ao se trabalhar em um time.

Em projetos NextJS/React a tendencia é que nossos componentes importem não só pacotes mas também outros diversos componentes. Na maioria das vezes acabamos com importações como essa:

import Header from '../../../components/Header'

Podemos tornar isso mais simples utilizando alias para acessar as pastas que temos na aplicação.

Em suas últimas versões o NextJS tornou isso ainda mais simples, ainda mais para quem trabalha com o VSCode.

Na raiz do seu projeto crie o arquivo jsconfig.json ou tsconfig.json, caso seu projeto utilize Typescript.

{
    compilerOptions: {
        "baseUrl": "."
    }
}

Com o baseUrl definimos a pasta base do nosso projeto podendo assim alterar a importação para:

import Header from 'components/Header'

Paths

Por vezes utilizamos subpastas para nossos arquivos:

import Button from '../components/atoms/Button'

Utilizando o método anterior nossa importação ficaria:

import Button from 'components/atom/Button

Mas e se ainda pudermos deixar mais objetivo essa importação, diretamente para as subpastas do projeto?

Podemos fazer isso utilizando a propriedade paths da seguinte maneira:

{
    compilerOptions: {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
            "@/atoms/*": ["components/atoms/*"],
            "@/molecules/*": ["components/molecules/*"],
            "@/organisms/*": ["components/organisms/*"],
        }
    }
}

A partir de agora temos um caminho mais objetivo para os arquivos:

import Button from '@/atoms/Button'

Uma grande vantagem é que o próprio VSCode reconhece esse caminho, então quando realizamos importações automáticas dos nossos arquivos(utilizando cmd + espaço ou ctrl + espaço ) é aplicado o valor que definimos no paths.

No site do VSCode você pode ver outras configurações que podem ser adicionadas ao jsconfig.json e tsconfig.json.

Configuração eslint

Se você estiver utilizando o eslint no seu projeto, e realmente espero que esteja, é necessário adicionar uma regra para que ele aceite os nosso atalhos sem retornar erro.

Existem diversas maneiras de se fazer isso e uma que acho simples é que ao adicionarmos algum símbolo as nossas importações, como o @, podemos usar a seguinte regra no eslintrc:

"rules": {
    ...,
    "import/no-unresolved": ["error", { "ignore": ["^@"] }]
  },

Pronto, agora o seu projeto está pronto para continuar, com um pouco mais de organização.