Absolute Imports und Modul-Pfad-Aliase

Beispiele

Absolute Imports und Aliase

Next.js bietet integrierte Unterstützung für die Optionen "paths" und "baseUrl" von tsconfig.json und jsconfig.json Dateien.

Diese Optionen ermöglichen es Ihnen, Projektverzeichnisse auf absolute Pfade zu aliassen, was den Import von Modulen erleichtert. Zum Beispiel:

// vorher
import { Button } from '../../../components/button'

// nachher
import { Button } from '@/components/button'

Gut zu wissen: create-next-app wird Sie auffordern, diese Optionen für Sie zu konfigurieren.

Absolute Imports

Die baseUrl-Konfigurationsoption ermöglicht es Ihnen, direkt aus dem Stammverzeichnis des Projekts zu importieren.

Ein Beispiel für diese Konfiguration:

tsconfig.json oder jsconfig.json

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

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

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

import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Modul-Aliase

Zusätzlich zur Konfiguration des baseUrl-Pfads können Sie die Option "paths" verwenden, um Modulpfade zu "aliasen".

Zum Beispiel bildet die folgende Konfiguration @/components/* auf components/* ab:

tsconfig.json oder jsconfig.json

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

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

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

import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Jeder der "paths" ist relativ zum baseUrl-Standort. Zum Beispiel:

// tsconfig.json oder 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>
  )
}

Absolute Imports und Modul-Pfad-Aliase

Absolute Imports

Modul-Aliase

On this page