Absolute Imports: Leveraging '@' for Efficient Direct Imports

#nextjs #javascript #webdev

" 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';

Top comments (2)

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

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