URL 导入是一项实验性功能，它允许您直接从外部服务器（而不是从本地磁盘）导入模块。
警告：仅使用您信任的域名进行下载并在您的机器上执行。在功能被标记为稳定之前，请谨慎操作。
要启用此功能，请在 next.config.js 中添加允许的 URL 前缀：
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 导入的域名。我们正在努力通过使用 Edge Runtime 将 URL 导入限制在浏览器沙箱中执行，从而进一步加强安全性。
使用 URL 导入时，Next.js 将创建一个 next.lock 目录，其中包含一个锁定文件和获取的资源。
此目录必须提交到 Git，而不能被 .gitignore 忽略。
next dev 时，Next.js 将下载所有新发现的 URL 导入并将其添加到您的锁定文件。next build 时，Next.js 将仅使用锁定文件来构建生产应用程序。通常，不需要进行网络请求，任何过时的锁定文件都将导致构建失败。
一个例外是响应头包含 Cache-Control: no-cache 的资源。
这些资源在锁定文件中会有一个 no-cache 条目，并且在每次构建时都会从网络中获取。
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>
).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"