urlImports

此功能目前處於實驗階段，可能會有所更改，不建議用於生產環境。歡迎試用並在 GitHub 上分享您的反饋。

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` 條目，並且每次構建時都將始終從網路中獲取。

示例

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)
 
// prints "/_next/static/media/file.a9727b5d.txt"