assetPrefix
ملاحظة: النشر على Vercel يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك. لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا.
معلومة مفيدة: Next.js 9.5+ أضافت دعمًا لـ مسار الأساس (Base Path) القابل للتخصيص، والذي يكون أكثر ملاءمة لاستضافة تطبيقك على مسار فرعي مثل
/docs
. لا ننصح باستخدام بادئة أصول مخصصة لهذا الغرض.
إعداد شبكة توصيل المحتوى (CDN)
لإعداد شبكة توصيل محتوى (CDN)، يمكنك تعيين بادئة الأصول (asset prefix) وضبط أصل CDN ليتحول إلى النطاق الذي يستضيف Next.js.
افتح ملف next.config.mjs
وأضف تكوين assetPrefix
بناءً على المرحلة:
// @ts-check
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'
export default (phase) => {
const isDev = phase === PHASE_DEVELOPMENT_SERVER
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
assetPrefix: isDev ? undefined : 'https://cdn.mydomain.com',
}
return nextConfig
}
سيستخدم Next.js تلقائيًا بادئة الأصول الخاصة بك لملفات JavaScript و CSS التي يتم تحميلها من المسار /_next/
(مجلد .next/static/
). على سبيل المثال، مع التكوين أعلاه، طلب جزء JS التالي:
/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
سيصبح بدلاً من ذلك:
https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
سيعتمد التكوين الدقيق لرفع ملفاتك إلى CDN معين على CDN الذي تختاره. المجلد الوحيد الذي تحتاج إلى استضافته على CDN الخاص بك هو محتويات .next/static/
، والتي يجب رفعها كـ _next/static/
كما يشير عنوان URL أعلاه. لا ترفع بقية مجلد .next/
، حيث لا يجب تعريض كود الخادم والتكوينات الأخرى للعامة.
بينما تغطي assetPrefix
طلبات _next/static
، إلا أنها لا تؤثر على المسارات التالية:
- الملفات في مجلد public؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، يجب عليك إضافة البادئة بنفسك
- طلبات
/_next/data/
لصفحاتgetServerSideProps
. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لأنها ليست ثابتة. - طلبات
/_next/data/
لصفحاتgetStaticProps
. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لدعم التوليد الثابت التدريجي (Incremental Static Generation)، حتى لو لم تكن تستخدمه (لضمان الاتساق).