Skip to main content

urlImports

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

¥URL imports are an experimental feature that allows you to import modules directly from external servers (instead of from the local disk).

警告：此功能是实验性的。仅使用你信任的域来下载并在你的计算机上执行。在该功能被标记为稳定之前，请谨慎行事。

¥Warning: This feature is experimental. Only use domains that you trust to download and execute on your machine. Please exercise discretion, and caution until the feature is flagged as stable.

要选择加入，请在 next.config.js 内添加允许的 URL 前缀：

¥To opt-in, add the allowed URL prefixes inside next.config.js:

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

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

¥Then, you can import modules directly from URLs:

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

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

¥URL Imports can be used everywhere normal package imports can be used.

安全模型​

¥Security Model

此功能的设计以安全性为首要考虑。首先，我们添加了一个实验性标志，强制你明确允许接受 URL 导入的域。我们正在努力通过限制 URL 导入使用 Edge 运行时 在浏览器沙箱中执行来进一步解决这个问题。

¥This feature is being designed with security as the top priority. To start, we added an experimental flag forcing you to explicitly allow the domains you accept URL imports from. We're working to take this further by limiting URL imports to execute in the browser sandbox using the Edge Runtime.

锁文件​

¥Lockfile

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

¥When using URL imports, Next.js will create a next.lock directory containing a lockfile and fetched assets. This directory must be committed to Git, not ignored by .gitignore.

  • 运行 next dev 时，Next.js 将下载所有新发现的 URL 导入并将其添加到你的锁定文件中

    ¥When running next dev, Next.js will download and add all newly discovered URL Imports to your lockfile

  • 运行 next build 时，Next.js 将仅使用锁定文件来构建生产应用

    ¥When running next build, Next.js will use only the lockfile to build the application for production

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

¥Typically, no network requests are needed and any outdated lockfile will cause the build to fail. One exception is resources that respond with Cache-Control: no-cache. These resources will have a no-cache entry in the lockfile and will always be fetched from the network on each build.

示例​

¥Examples

天空包​

¥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>
)

CSS 中的 URL​

¥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"