urlImports

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 导入可用于所有常规包导入的使用场景。

安全模型

此功能设计以安全为最高优先级。初始阶段，我们通过实验性标志强制要求显式声明允许导入的域名。我们正进一步开发，计划通过 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"

安全模型

锁文件

示例

Skypack

静态图片导入

CSS 中的 URL

资源导入

On this page