urlImports
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 导入可在所有常规包导入能使用的场景中使用。
安全模型
本功能的设计以安全为最高优先级。初始阶段，我们通过实验性标志强制要求显式声明允许导入的域名。我们正进一步推进该功能，计划通过 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 条目，每次构建时都会从网络重新获取。
示例
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)
// 输出 "/_next/static/media/file.a9727b5d.txt"