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" と表示されます