urlImports

URL içe aktarımları, modülleri doğrudan harici sunuculardan (yerel disk yerine) içe aktarmanıza olanak tanıyan deneysel bir özelliktir.

Uyarı: Bu özellik deneyseldir. Makinenize indirmek ve çalıştırmak için yalnızca güvendiğiniz etki alanlarını kullanın. Bu özellik kararlı olarak işaretlenene kadar lütfen sağduyulu davranın ve dikkatli olun.

Katılmak için, izin verilen URL öneklerini next.config.js içine ekleyin:

next.config.js

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

Ardından, modülleri doğrudan URL'lerden içe aktarabilirsiniz:

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

URL İçe Aktarımları normal paket içe aktarımlarının kullanılabildiği her yerde kullanılabilir.

Security Model

Bu özellik, güvenlik ön planda tutularak tasarlanmıştır. Başlangıç olarak, URL içe aktarımlarını kabul ettiğiniz etki alanlarına açıkça izin vermenizi zorunlu kılan deneysel bir bayrak ekledik. URL içe aktarımlarını Edge Runtime kullanarak tarayıcı sanal alanında yürütülecek şekilde sınırlandırarak bunu daha da ileri götürmek için çalışıyoruz.

Lockfile

URL içe aktarımlarını kullanırken Next.js, bir kilit dosyası ve getirilen varlıkları içeren bir next.lock dizini oluşturacaktır. Bu dizin Git'e işlenmeli, .gitignore tarafından göz ardı edilmemelidir.

next dev çalıştırıldığında, Next.js yeni keşfedilen tüm URL İçe Aktarımlarını indirecek ve kilit dosyanıza ekleyecektir
next build çalıştırıldığında Next.js, üretim için uygulamayı oluşturmak üzere yalnızca lockfile dosyasını kullanacaktır

Tipik olarak, hiçbir ağ isteğine gerek yoktur ve güncel olmayan herhangi bir kilit dosyası derlemenin başarısız olmasına neden olur. Bir istisna, Cache-Control: no-cache ile yanıt veren kaynaklardır. Bu kaynakların kilit dosyasında bir no-cache girişi olacak ve her derlemede her zaman ağdan alınacaktır.

Examples

Skypack

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
import { useEffect } from 'react'
 
export default () => {
  useEffect(() => {
    confetti()
  })
  return <p>Hello</p>
}

Static Image Imports

import Image from 'next/image'
import logo from 'https://example.com/assets/logo.png'
 
export default () => (
  <div>
    <Image src={logo} placeholder="blur" />
  </div>
)

URLs in CSS

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

Asset Imports

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