urlImports

Core Idea

Experimental feature letting you import modules directly from external URLs instead of local disk, gated behind an explicit allowlist of domains for security.

Key Concepts

• experimental.urlImports: array of allowed URL prefixes; only domains listed can be imported from.
• next.lock directory: contains a lockfile + fetched assets; must be committed to Git (not gitignored).
• Build behavior: next dev downloads and adds new URL imports to the lockfile; next build uses only the lockfile (no network needed, except no-cache resources which always refetch).

Code Examples

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

• O que demonstra: allowlist de prefixos de URL permitidos pra import.

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

• O que demonstra: import de módulo JS direto de CDN externo, sem instalar via npm.

Anti-patterns

• Permitir domínios não confiáveis: código baixado e executado na sua máquina; a doc alerta explicitamente pra usar só domínios de confiança.
• Ignorar next.lock no Git: quebra reprodutibilidade de build, já que next build depende só do lockfile.

Key Takeaways

1. Feature experimental, não recomendada pra produção ainda; segurança é a prioridade de design (allowlist obrigatória).
2. Funciona também pra CSS (url()), imagens estáticas (next/image) e asset imports via new URL(...).
3. Planejam restringir execução ao Edge Runtime sandbox no futuro.

Connects To

• Edge Runtime: direção futura de sandboxing pra URL imports.