absolute import and aliases with nextjs

absolute import and aliases with nextjs

#Nextjs 9.4 has better support for absolute imports and aliases. It is now possible to set a baseurl in jsconfig.js. This file also has support for paths now. #javascript #webdev #tip

Copy Snippet
// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
// Without baseUrl
import Button from '../../../../components/button'
// With baseUrl option set
import Button from 'components/button'


// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}
// Imports 'components/design-system/button'
import Button from '@/design-system/button'