استيراد من الروابط (urlImports)

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

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

لتفعيل هذه الميزة، أضف بادئات الروابط المسموح بها داخل ملف next.config.js:

next.config.js

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

ثم يمكنك استيراد الوحدات مباشرة من الروابط:

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

يمكن استخدام استيراد من الروابط في كل مكان يمكن استخدام استيراد الحزم العادية فيه.

نموذج الأمان

تم تصميم هذه الميزة مع الأمان كأولوية قصوى. في البداية، أضفنا علامة تجريبية تفرض عليك السماح صراحةً بالنطاقات التي تقبل استيراد الوحدات منها. نحن نعمل على تطوير ذلك أكثر عن طريق تقييد استيراد الروابط لتنفيذها في بيئة المتصفح الآمنة باستخدام Edge Runtime.

ملف القفل (Lockfile)

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

عند تشغيل next dev، سيقوم Next.js بتنزيل وإضافة جميع عمليات استيراد الروابط المكتشفة حديثًا إلى ملف القفل الخاص بك.
عند تشغيل 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

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