Absolute Imports and Module Path Aliases

Next.js, tsconfig.json ve jsconfig.json dosyalarının "paths" ve "baseUrl" seçenekleri için yerleşik desteğe sahiptir.

Bu seçenekler, proje dizinlerini mutlak yollara takma ad olarak eklemenize olanak tanıyarak modülleri içe aktarmayı kolaylaştırır. Örneğin:

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

Bilmenizde fayda var: create-next-app bu seçenekleri sizin için yapılandırmanızı isteyecektir.

Absolute Imports

baseUrl yapılandırma seçeneği, doğrudan projenin kökünden içe aktarmanıza olanak tanır.

Bu yapılandırmaya bir örnek:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

export default function Button() {
  return <button>Click me</button>
}

import Button from 'components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Module Aliases

baseUrl yolunu yapılandırmanın yanı sıra, modül yollarını "takma ad" olarak kullanmak için "paths" seçeneğini de kullanabilirsiniz.

Örneğin, aşağıdaki yapılandırma @/components/* adresini components/* adresiyle eşler:

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

export default function Button() {
  return <button>Click me</button>
}

import Button from '@/components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

"paths" adresinin her biri baseUrl konumuna göredir. Örneğin:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

// pages/index.js
import Button from '@/components/button'
import '@/styles/styles.css'
import Helper from 'utils/helper'
 
export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  )
}