استيراد من عنوان URL (urlImports)

استيراد من عناوين URL هي ميزة تجريبية تسمح لك باستيراد وحدات مباشرة من خوادم خارجية (بدلاً من القرص المحلي).

تحذير: هذه الميزة تجريبية. استخدم فقط النطاقات التي تثق بها لتنزيل وتنفيذها على جهازك. يرجى توخي الحذر والانتباه حتى يتم تصنيف الميزة على أنها مستقرة.

لتفعيل هذه الميزة، أضف بادئات عناوين 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 منها. نحن نعمل على تطوير ذلك أكثر من خلال تقييد استيراد عناوين URL للتنفيذ في بيئة المتصفح الآمنة باستخدام Edge Runtime.

ملف القفل

عند استخدام استيراد من عناوين URL، سيقوم Next.js بإنشاء دليل next.lock يحتوي على ملف قفل والأصول التي تم جلبها. يجب إضافة هذا الدليل إلى Git، وليس تجاهله بواسطة .gitignore.

• عند تشغيل 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>
)

عناوين URL في CSS

.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"