Absolute Import is a great way to clean up your imports

Example

This is the usual way of importing with .. operator to go back 1 folder:

import Nav from '../../components/Nav';jsx

And this is the clean import using absolute import:

import Nav from '@/components/Nav';jsx

For Next.js

Add this to root with the filename of `jsconfig.json`

{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  },
  "exclude": ["node_modules", ".next"]
}json

Or you can just use my Next.js & Tailwindcss starter template

For Create React App

Add this to root with the filename of `jsconfig.json`

{
  "compilerOptions": {
    "baseUrl": "./src",
    "jsx": "preserve",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./components/*"],
      "@/pages/*": ["./pages/*"],
      "@/contexts/*": ["./contexts/*"],
      "@/routes/*": ["./routes/*"]
    }
  },
  "exclude": ["node_modules", "build"]
}json

And in craco.config.js

const path = require('path');
 
module.exports = {
  // ...existing code
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};js

Absolute Import

Example

For Next.js

Add this to root with the filename of jsconfig.json

For Create React App

Add this to root with the filename of jsconfig.json

And in craco.config.js

Add this to root with the filename of `jsconfig.json`

Add this to root with the filename of `jsconfig.json`