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

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

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

لتفعيل هذه الميزة، أضف بادئات الروابط المسموح بها داخل ملف 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.

ملف القفل

عند استخدام استيراد الروابط، سيقوم 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"