urlImports

URL 임포트는 외부 서버에서 직접 모듈을 가져올 수 있게 해주는 실험적 기능입니다. 이로써 로컬 저장소 대신 외부 소스를 사용할 수 있습니다.

경고: 기능이 안정화될 때까지 신중하고 주의해서 사용하세요. 귀하의 기기에서 다운로드하고 실행할 수 있는 신뢰할 수 있는 도메인만 사용하세요.

이 기능을 사용하려면 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 임포트는 일반 패키지 임포트를 사용할 수 있는 모든 곳에서 사용할 수 있습니다.

보안 모델

이 기능은 보안을 최우선 순위로 설계되고 있습니다. 시작하기 위해, URL 임포트를 허용할 도메인을 명시적으로 지정하도록 강제하는 실험적 플래그를 추가했습니다. 우리는 Edge Runtime을 사용하여 브라우저 샌드박스에서 URL 임포트를 실행하도록 제한하여 이를 더욱 발전시키고 있습니다.

잠금 파일

URL 임포트를 사용할 때 Next.js는 잠금 파일과 가져온 리소스를 포함하는 next.lock 디렉토리를 생성합니다. 이 디렉토리는 .gitignore에 의해 무시되지 않고 Git에 커밋되어야 합니다.

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

CSS의 URL

.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"를 출력합니다

typescript useLightningcss