︙

urlImports

URL インポートは、エクスペリメンタルな機能で、これにより外部 server から直接 import modules できます(ローカルディスクからではなく)。

警告: この機能は実験的なものです。ダウンロードして自分のマシンで実行するための domains は信頼できるものだけを使用してください。注意を払って使用してください。ディスクレーションと慎重さが求められます、その機能が安定版としてフラグが付くまで。

オプトインするには、next.config.js内に許可された URL プレフィックスを追加してください：

next.config.js

module.exports = {
  experimental: {
    urlImports: ['https://example.com/assets/', 'https://cdn.skypack.dev'],
  },
}

その後、URL から直接 import modules を行うことができます。

import { a, b, c } from "https://example.com/assets/some/module.js";

URL インポートは、通常のパッケージインポートが使用できるどこでも使用できます。

Security Model

この機能はセキュリティを最優先の priorityとして設計されています。始めるための start は、明示的に許可する domains からの URL インポートを強制する実験フラグを追加しました。私たちは、Edge Runtime を使用してブラウザのサンドボックスで実行するための URL インポートを制限することで、これをさらに進めることを計画しています。

Lockfile

URL インポートを使用すると、 Next.js はロックファイルと取得したアセットを含む next.lock ディレクトリを作成します。このディレクトリは Git にコミットする必要があります、.gitignoreで無視してはいけません。

next devを実行するとき、Next.js は新たに発見した全ての URL インポートをロックファイルにダウンロードして追加します。
next buildを実行するとき、Next.js はロックファイルのみを使用して、アプリケーションを production 用に build します。

通常、ネットワークリクエストは必要なく、古いロックファイルが存在すると build が失敗します。例外はCache-Control: no-cacheで応答するリソースです。これらのリソースにはロックファイルにno-cacheエントリがあり、毎回 build の際にネットワークからフェッチされます。

Examples

Skypack

import confetti from "https://cdn.skypack.dev/canvas-confetti";
import { useEffect } from "react";

export default () => {
  useEffect(() => {
    confetti();
  });
  return <p>Hello</p>;
};

静的な Image インポート

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"