urlImports

此 API 目前处于实验阶段，可能会发生变化。

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 导入在浏览器沙箱中使用边缘运行时执行来进一步实现这一点。

锁定文件

使用 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>
}

静态图像导入

import Image from 'next/image'
import logo from 'https://example.com/assets/logo.png'
 
export default () => (
  <div>
    <Image src={logo} placeholder="blur" />
  </div>
)

CSS 中的 URL

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

资源导入

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

这有帮助吗？