Menu

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 导入可以在任何可以使用常规包导入的地方使用。

安全模型

此功能的设计以 安全性为首要考虑。首先，我们添加了一个实验性标志，强制你明确允许接受 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"