Pengaturan Path di Next.js

Pengaturan Path di Next.js sangat mempermudah kita untuk menuliskan baris program. Untuk baca dari dokumen resminya ada disini.

Contoh kasus adalah seperti ini :

Saya punya halaman form1.js dan akan menggunakan komponen LayoutUtama yang berada di folder component/layout , sehingga penulisannya untuk memanggil komponent tersebut dari posisi folder pages/abc adalah sebagai berikut :

import LayoutUtama from "../../components/layout/layout-utama";

Jika saya ingin restrukturisasi file, lalu misalnya saya pindahkan file form1.js di folder pages/abc/tahap1/ maka saya juga harus mengubah import komponen LayoutUtama menjadi sperti di bawah ini :

import LayoutUtama from "../../../components/layout/layout-utama";

Kalau hanya satu ini mungkin tidak repot, bagaimana jika banyak komponen, dan banyak file yang berubah posisi folder nya? Maka sangat merepotkan dan tentu bisa jadi berpotensi error pada program.

Solusinya adalah pengaturan path pada file jsconfig.json (jika tidak menggunakan typescript). Jika file ini belum ada, silahkan dibuat terlebih dahulu. Isi dari jsconfig.json adalah sebagai berikut

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

sehingga kita bisa menggganti import komponen nya menjadi berikut

import LayoutUtama from "@/components/layout/layout-utama";