Absolute Imports und Modul-Pfadalias

Beispiele

Absolute Imports und Aliases

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

Diese Optionen ermöglichen es Ihnen, Projektverzeichnisse zu absoluten Pfaden zu aliasieren, wodurch das Importieren von Modulen vereinfacht wird. Zum Beispiel:

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

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

Absolute Imports

Die Konfigurationsoption baseUrl ermöglicht es Ihnen, direkt von der Projektstammebene zu importieren.

Ein Beispiel für diese Konfiguration:

tsconfig.json

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

components/button.tsx

TypeScript

export default function Button() {
  return <button>Klick mich</button>
}

app/page.tsx

TypeScript

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

Modul-Aliases

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

Beispielsweise ordnet die folgende Konfiguration @/components/* zu components/* zu:

tsconfig.json

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

components/button.tsx

TypeScript

export default function Button() {
  return <button>Klick mich</button>
}

app/page.tsx

TypeScript

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

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

tsconfig.json

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

app/page.tsx

TypeScript

import Button from '@/components/button'
import '@/styles/styles.css'
import Helper from 'utils/helper'
 
export default function HomePage() {
  return (
    <Helper>
      <h1>Hallo Welt</h1>
      <Button />
    </Helper>
  )
}