Depois de um tempo trabalhando com NextJS e estudando o mesmo encontrei uma forma de implementar Imports de uma forma mais dinâmica, deixando o código mais limpo.

Uma coisa que me incomodava muito era o fato de ter que escrever uma tripa de imports como: import * from "../../../../o-que-quero-importar", em alguns casos meu código ficava extremamente grande para algo que não era necessário.

Então em um belo dia de Outubro eu estava navegando pelas Issues do NextJS e me deparei com este novo Pull Request que vem com a proposta de adicionar suporte aos Paths no tsconfig.json e no jsconfig.json por padrão.

O bacana é que com essa possibilidade eu poderia resolver meu problema que me afligia a muito tempo. Implementado a partir da versão 9.4 do NextJS eu simplesmente precisaria definir um baseURL no meu arquivo de configuração para ter suporte a importações absolutas.

{
  "compilerOptions": {
    "baseURL": "."
  }
}

// Vai me resultar em: import Button from 'components/button'

Além disso posso utilizar um prefixo customizado, basta adicionar um paths na configuração:

{
  "compilerOptions": {
    "baseURL": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

// Vai me resultar em: import Button from '@components/button'

Vale lembrar que editores de código como VSCode tem suporte automático a suas configurações no jsconfig.json então basta clicar Command+Click para ir direto ao arquivo que ali foi definido e edita-lo tranquilamente. E vale apontar que Atom e IntelliJ também tem suporte para edições.

Gostaria de deixar como referencia um artigo do Paco que me inspirou em escrever este artigo e compartilhar de uma forma simples.