URLインポート

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インポートを使用すると、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" と表示