URL-Importe

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

Achtung: Verwenden Sie nur Domains, denen Sie vertrauen, um sie auf Ihrem Rechner herunterzuladen und auszuführen. Bitte seien Sie umsichtig und vorsichtig, bis das Feature als stabil gekennzeichnet ist.

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

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

Dann können Sie Module direkt von URLs importieren:

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

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

Sicherheitsmodell

Dieses Feature wird mit Sicherheit als höchster Priorität entwickelt. Zunächst haben wir ein experimentelles Flag hinzugefügt, das Sie zwingt, die Domains, von denen Sie URL-Importe akzeptieren, explizit zu erlauben. Wir arbeiten daran, dies weiterzuentwickeln, indem URL-Importe im Browser-Sandbox unter Verwendung der Edge Runtime ausgeführt werden.

Lockfile

Bei Verwendung von URL-Importen erstellt Next.js ein next.lock-Verzeichnis, das eine Lockdatei und heruntergeladene Assets enthält. Dieses Verzeichnis muss in Git committet werden und darf nicht von .gitignore ignoriert werden.

• Bei next dev lädt Next.js alle neu entdeckten URL-Importe herunter und fügt sie der Lockdatei hinzu.
• Bei next build verwendet Next.js nur die Lockdatei, um die Anwendung für die Produktion zu bauen.

Normalerweise werden keine Netzwerkanfragen benötigt, und eine veraltete Lockdatei führt zum Fehlschlagen des Builds. Eine Ausnahme bilden Ressourcen, die mit Cache-Control: no-cache antworten. Diese Ressourcen haben einen no-cache-Eintrag in der Lockdatei und werden bei jedem Build immer aus dem Netzwerk abgerufen.

Beispiele

Skypack

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
import { useEffect } from 'react'
 
export default () => {
  useEffect(() => {
    confetti()
  })
  return <p>Hallo</p>
}

Statische Bild-Importe

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-Importe

const logo = new URL('https://example.com/assets/file.txt', import.meta.url)
 
console.log(logo.pathname)
 
// druckt "/_next/static/media/file.a9727b5d.txt"