Импорт из URL

Импорт из URL — это экспериментальная функция, позволяющая импортировать модули напрямую с внешних серверов (вместо локального диска).

Предупреждение: Используйте только доверенные домены для загрузки и выполнения кода на вашей машине. Проявляйте осмотрительность и осторожность, пока функция не будет помечена как стабильная.

Для активации добавьте разрешенные префиксы URL в next.config.js:

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.

Файл блокировки (Lockfile)

При использовании импорта из 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>
)

URL в CSS

.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"