Importaciones desde URL

Las importaciones desde URL son una característica experimental que te permite importar módulos directamente desde servidores externos (en lugar de desde el disco local).

Advertencia: Solo utiliza dominios en los que confíes para descargar y ejecutar en tu máquina. Por favor, ejerce discreción y precaución hasta que esta característica sea marcada como estable.

Para activarla, agrega los prefijos de URL permitidos dentro de next.config.js:

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

Luego, puedes importar módulos directamente desde URLs:

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

Las importaciones desde URL pueden usarse en cualquier lugar donde se puedan usar importaciones normales de paquetes.

Modelo de Seguridad

Esta característica está siendo diseñada con la seguridad como prioridad máxima. Para comenzar, agregamos una bandera experimental que te obliga a permitir explícitamente los dominios desde los que aceptas importaciones. Estamos trabajando para llevar esto más lejos limitando las importaciones desde URL para que se ejecuten en el sandbox del navegador usando el Edge Runtime.

Archivo de Bloqueo (Lockfile)

Cuando usas importaciones desde URL, Next.js creará un directorio next.lock que contiene un archivo de bloqueo y los recursos obtenidos. Este directorio debe ser confirmado en Git, no ignorado por .gitignore.

• Cuando ejecutas next dev, Next.js descargará y agregará todas las nuevas importaciones desde URL descubiertas a tu archivo de bloqueo.
• Cuando ejecutas next build, Next.js usará solo el archivo de bloqueo para construir la aplicación para producción.

Normalmente, no se necesitan solicitudes de red y cualquier archivo de bloqueo desactualizado hará que la construcción falle. Una excepción son los recursos que responden con Cache-Control: no-cache. Estos recursos tendrán una entrada no-cache en el archivo de bloqueo y siempre se obtendrán de la red en cada construcción.

Ejemplos

Skypack

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

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

Importación de Imágenes Estáticas

import Image from 'next/image'
import logo from 'https://example.com/assets/logo.png'

export default () => (
  <div>
    <Image src={logo} placeholder="blur" />
  </div>
)

URLs en CSS

.className {
  background: url('https://example.com/assets/hero.jpg');
}

Importación de Recursos

const logo = new URL('https://example.com/assets/file.txt', import.meta.url)

console.log(logo.pathname)

// imprime "/_next/static/media/file.a9727b5d.txt"