Absolute Imports: Leveraging '@' for Efficient Direct Imports

" This article is published using Lamento🍋

import Layout from "../components/layout";
import { fetcher } from '../lib/fetcher';

Add this configuration in your tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/hooks/*": ["lib/hooks/*"]
    },

import Button from '@components/Layout'
import { fetcher } from '@lib/fetcher';

make sure to restart the application in your localhost
Reference:
https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js/

Comments

[Valery Zinchenko]

I really like this approach, I adopted it almost a year ago and I really enjoy it.

[Akilesh]

Thanks Val ✨ I think so everyone came across this method but we just don't know what it's called .