Absolute Imports und Modulpfad-Aliase

Beispiele

Absolute Imports und Aliase

Next.js bietet integrierte Unterstützung für die "paths"- und "baseUrl"-Optionen 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 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 "paths"-Option verwenden, um Modul-Pfade zu "aliasen".

Beispielsweise 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. 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 Modulpfad-Aliase

Absolute Imports

Modul-Aliase

On this page