urlImports

URLインポートは、（ローカルディスクからではなく）外部サーバーから直接モジュールをインポートできる実験的な機能です。

警告：マシンにダウンロードして実行することを信頼できるドメインのみを使用してください。この機能が安定版とされるまでは、慎重に判断し、注意して使用してください。

オプトインするには、許可された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ランタイムを使用して、ブラウザサンドボックスで実行するようにURLインポートを制限することで、これをさらに進めるよう取り組んでいます。

ロックファイル

URLインポートを使用する場合、Next.jsはロックファイルとフェッチされたアセットを含むnext.lockディレクトリを作成します。 このディレクトリは、.gitignoreによって無視されるのではなく、Gitにコミットする必要があります。

• next devを実行すると、Next.jsは新しく検出されたすべてのURLインポートをダウンロードしてロックファイルに追加します。
• next buildを実行すると、Next.jsはロックファイルのみを使用して、本番環境用のアプリケーションをビルドします。

通常、ネットワークリクエストは必要ありません。古くなったロックファイルはビルドの失敗を引き起こします。 1つの例外は、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"