Absolute Imports

·

2 min read

import Layout from "../components/layout";
import { fetcher } from '../lib/fetcher';
Enter fullscreen mode Exit fullscreen mode

Add this configuration in your tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@/components/": ["components/"],
      "@/lib/": ["lib/"],
      "@/hooks/": ["lib/hooks/"]
    },
Enter fullscreen mode Exit fullscreen mode

Image description

import Button from '@components/Layout'

import { fetcher } from '@lib/fetcher';
Enter fullscreen mode Exit fullscreen mode

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


This article is published w/Scattr