urlImports

URL imports는 외부 서버에서 직접 모듈을 가져오는 실험적 기능입니다 (로컬 디스크에서 가져오는 대신).

경고: 이 기능은 실험적입니다. 신뢰할 수 있는 도메인만 사용하여 기계에서 다운로드 및 실행하세요. 기능이 안정적으로 플래그가 지정될 때까지 신중하고 주의하여 사용하세요.

옵트인하려면 next.config.js에 허용된 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 Imports는 일반 패키지 import가 사용될 수 있는 모든 곳에서 사용할 수 있습니다.

보안 모델

이 기능은 보안을 최우선으로 설계되었습니다. 먼저 실험적 플래그를 추가하여 URL import를 허용하는 도메인을 명시적으로 지정해야 합니다. 우리는 이를 더욱 발전시켜 Edge Runtime을 사용하여 URL import가 브라우저 샌드박스에서 실행되도록 제한할 예정입니다.

Lockfile

URL import를 사용할 때, Next.js는 next.lock 디렉터리를 생성하고 여기에는 lockfile과 가져온 자산이 포함됩니다. 이 디렉터리는 .gitignore에 무시되지 않고 Git에 커밋되어야 합니다.

next dev를 실행할 때, Next.js는 모든 새로 발견된 URL Imports를 lockfile에 다운로드하고 추가합니다.
next build를 실행할 때, Next.js는 lockfile만 사용하여 프로덕션용 애플리케이션을 빌드합니다.

일반적으로 네트워크 요청은 필요하지 않으며, 오래된 lockfile은 빌드 실패를 초래합니다. 한 가지 예외는 Cache-Control: no-cache로 응답하는 리소스입니다. 이러한 리소스는 lockfile에 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

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');
}

자산 import

const logo = new URL('https://example.com/assets/file.txt', import.meta.url)
 
console.log(logo.pathname)
 
// prints "/_next/static/media/file.a9727b5d.txt"

typescript webpack