Importations depuis des URLs

Les importations depuis des URL sont une fonctionnalité expérimentale qui vous permet d'importer des modules directement depuis des serveurs externes (au lieu du disque local).

Avertissement : Cette fonctionnalité est expérimentale. N'utilisez que des domaines de confiance pour télécharger et exécuter du code sur votre machine. Veuillez faire preuve de discernement et de prudence jusqu'à ce que la fonctionnalité soit marquée comme stable.

Pour l'activer, ajoutez les préfixes d'URL autorisés dans next.config.js :

next.config.js

module.exports = {
  experimental: {
    urlImports: ['https://example.com/assets/', 'https://cdn.skypack.dev'],
  },
}

Ensuite, vous pouvez importer des modules directement depuis des URL :

import { a, b, c } from 'https://example.com/assets/some/module.js'

Les importations depuis des URL peuvent être utilisées partout où les imports normaux de packages peuvent l'être.

Modèle de sécurité

Cette fonctionnalité est conçue avec la sécurité comme priorité absolue. Pour commencer, nous avons ajouté un drapeau expérimental vous forçant à autoriser explicitement les domaines depuis lesquels vous acceptez les importations. Nous travaillons à aller plus loin en limitant les importations depuis des URL à une exécution dans le bac à sable (sandbox) du navigateur en utilisant le Edge Runtime.

Fichier de verrouillage (Lockfile)

Lors de l'utilisation d'importations depuis des URL, Next.js créera un répertoire next.lock contenant un fichier de verrouillage et les ressources téléchargées. Ce répertoire doit être commité dans Git, et ne doit pas être ignoré par .gitignore.

Lors de l'exécution de next dev, Next.js téléchargera et ajoutera toutes les nouvelles importations depuis des URL découvertes à votre fichier de verrouillage
Lors de l'exécution de next build, Next.js utilisera uniquement le fichier de verrouillage pour construire l'application pour la production

Généralement, aucune requête réseau n'est nécessaire et tout fichier de verrouillage obsolète fera échouer la construction. Une exception concerne les ressources qui répondent avec Cache-Control: no-cache. Ces ressources auront une entrée no-cache dans le fichier de verrouillage et seront toujours récupérées depuis le réseau à chaque construction.

Exemples

Skypack

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
import { useEffect } from 'react'

export default () => {
  useEffect(() => {
    confetti()
  })
  return <p>Bonjour</p>
}

Importation d'images statiques

import Image from 'next/image'
import logo from 'https://example.com/assets/logo.png'

export default () => (
  <div>
    <Image src={logo} placeholder="blur" />
  </div>
)

URL dans CSS

.className {
  background: url('https://example.com/assets/hero.jpg');
}

Importation de ressources

const logo = new URL('https://example.com/assets/file.txt', import.meta.url)

console.log(logo.pathname)

// affiche "/_next/static/media/file.a9727b5d.txt"