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-импорты. Мы работаем над тем, чтобы расширить это, ограничив 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>
)

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)
 
// prints "/_next/static/media/file.a9727b5d.txt"