urlImports

此功能目前处于实验阶段，可能会发生变化，不建议用于生产环境。请试用并分享您在 GitHub 上的反馈。

URL 导入是一项实验性功能，允许您直接从外部服务器（而不是从本地磁盘）导入模块。

警告：仅使用您信任的域名来下载并在您的机器上执行。在功能标记为稳定之前，请谨慎行事。

要选择启用，请在 next.config.js 中添加允许的 URL 前缀

next.config.js

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

然后，您可以直接从 URL 导入模块

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

URL 导入可以在可以使用普通包导入的任何地方使用。

安全模型

此功能的设计首要考虑安全性。首先，我们添加了一个实验性标志，强制您显式允许您接受 URL 导入的域名。我们正在努力通过限制 URL 导入在浏览器沙箱中使用 Edge 运行时来进一步加强安全性。

锁定文件

使用 URL 导入时，Next.js 将创建一个 next.lock 目录，其中包含锁定文件和获取的资源。此目录必须提交到 Git，而不是被 .gitignore 忽略。

运行 next dev 时，Next.js 将下载所有新发现的 URL 导入并将其添加到您的锁定文件中。
运行 next build 时，Next.js 将仅使用锁定文件来构建生产应用程序。

通常，不需要网络请求，任何过时的锁定文件都会导致构建失败。一个例外是响应 Cache-Control: no-cache 的资源。这些资源将在锁定文件中有一个 no-cache 条目，并且始终在每次构建时从网络获取。

示例

Skypack

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

Static Image Imports

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)
 
// prints "/_next/static/media/file.a9727b5d.txt"