Import absolus et alias de chemins de modules

Exemples

Imports absolus et alias

Next.js prend en charge nativement les options "paths" et "baseUrl" des fichiers tsconfig.json et jsconfig.json.

Ces options vous permettent d'aliasser des répertoires du projet vers des chemins absolus, facilitant ainsi l'importation de modules. Par exemple :

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

// après
import { Button } from '@/components/button'

Bon à savoir : create-next-app vous proposera de configurer ces options automatiquement.

Imports absolus

L'option de configuration baseUrl vous permet d'importer directement depuis la racine du projet.

Exemple de configuration :

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

Alias de modules

En plus de configurer le chemin baseUrl, vous pouvez utiliser l'option "paths" pour "aliasser" des chemins de modules.

Par exemple, la configuration suivante mappe @/components/* vers components/* :

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

Chaque chemin "paths" est relatif à l'emplacement baseUrl. Par exemple :

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

Import absolus et alias de chemins de modules

Imports absolus

Alias de modules

On this page