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';And this is the clean import using absolute import:
import Nav from '@/components/Nav';For Next.js
Add this to root with the filename of jsconfig.json
{
"compilerOptions": {
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"@/*": ["*"]
}
},
"exclude": ["node_modules", ".next"]
}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"]
}And in craco.config.js
const path = require('path');
module.exports = {
// ...existing code
webpack: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
};