urlImports

URL-Imports sind ein experimentelles Feature, das es ermöglicht, Module direkt von externen Servern zu importieren (anstatt von der lokalen Festplatte).

Warnung: Verwenden Sie nur Domains, denen Sie vertrauen, um Code auf Ihrem Rechner herunterzuladen und auszuführen. Bitte gehen Sie mit Bedacht vor und seien Sie vorsichtig, bis dieses Feature als stabil gekennzeichnet ist.

Um es zu aktivieren, fügen Sie die erlaubten URL-Präfixe in der next.config.js hinzu:

next.config.js

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

Anschließend können Sie Module direkt von URLs importieren:

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

URL-Imports können überall dort verwendet werden, wo normale Paketimporte möglich sind.

Sicherheitsmodell

Dieses Feature wird mit höchster Priorität auf Sicherheit entwickelt. Zunächst haben wir ein experimentelles Flag hinzugefügt, das Sie zwingt, explizit die Domains anzugeben, von denen Sie URL-Imports zulassen. Wir arbeiten daran, dies weiter zu verbessern, indem URL-Imports auf die Ausführung im Browser-Sandbox mithilfe der Edge Runtime beschränkt werden.

Lockfile

Bei Verwendung von URL-Imports erstellt Next.js ein next.lock-Verzeichnis, das eine Lockfile und heruntergeladene Assets enthält. Dieses Verzeichnis muss in Git eingecheckt werden und sollte nicht durch .gitignore ignoriert werden.

Bei Ausführung von next dev lädt Next.js alle neu entdeckten URL-Imports herunter und fügt sie Ihrer Lockfile hinzu.
Bei Ausführung von next build verwendet Next.js ausschließlich die Lockfile, um die Anwendung für die Produktion zu erstellen.

In der Regel sind keine Netzwerkanfragen erforderlich, und eine veraltete Lockfile führt zum Build-Fehler. Eine Ausnahme sind Ressourcen, die mit Cache-Control: no-cache antworten. Diese Ressourcen erhalten einen no-cache-Eintrag in der Lockfile und werden bei jedem Build erneut aus dem Netzwerk geladen.

Beispiele

Skypack

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

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

Statische Bildimporte

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

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

URLs in CSS

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

Asset-Imports

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

console.log(logo.pathname)

// gibt "/_next/static/media/file.a9727b5d.txt" aus