Absolute Import di Next JS Typescript

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ

Setiap kali kita membuat project dengan NextJS, secara default dia memakai relative import.

import { getSlugs } from "../../lib/helpers/getSlugs";

Kelihatannya simpel pada awalnya, Tapi lain cerita jika project yang kita buat itu sudah kompleks alias sudah bercabang-cabang. Tentu repot bukan. Makanya, untuk memudahkan, kita menggunakan absolute import.

Sebelum menggunakan absolute import, kita perlu setting dulu di bagian tsconfig.json nya. Di tsconfig.json, lebih tepatnya di dalam compilerOptions, kita bisa tambahkan seperti ini:

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

Saya menggunakan src folder. Jadi folder seperti pages, styles yang awalnya di root directory saya pindahin ke dalam src.

Kita juga bisa mengatur path aliasnya agar lebih spesifik. Seperti ini:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~components/*": ["components/*"],
      "~lib/*": ["lib/*"]
    }
  }
}

Karena baseUrl sudah saya set ke src, maka saya tidak perlu lagi menulis seperti ini src/components/* di bagian paths nya.

Untuk pathnya, silahkan sesuaikan saja dengan susunan folder dalam projectnya.

Jadi untuk mengimport file, kita tinggal melakukannya seperti ini:

import { getSlugs } from "~lib/helpers/getSlugs";

Absolute Import di Next JS Typescript

Referensi