الفرق بين المراجعتين ل"Next.js/static file serving"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب' = تخديم الملفات الساكنة = تستطيع Next.js تخديم الملفات الساكنة مثل الصور الموجودة في المجلد <code>pu...')
 
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 +
<noinclude>{{DISPLAYTITLE:تخديم الملفات الساكنة في Next.js}}</noinclude>
 +
تستطيع Next.js تخديم الملفات الساكنة static files أي الملفات الثابتة التي لا تتغير مثل الصور التي توجد في المجلد <code>public</code> ضمن المجلد الجذري. يمكن الإشارة عندها إلى تلك الملفات باسم الملف يسبقه عنوان URL الجذري <code>/</code>.
  
−
= تخديم الملفات الساكنة =
+
فلو أضفت الصورة <code>me.png</code> مثلًا إلى المجلد <code>public</code>، ستتمكن من الوصول إليها من خلال الشيفرة التالية:<syntaxhighlight lang="javascript">
−
تستطيع Next.js تخديم الملفات الساكنة مثل الصور الموجودة في المجلد <code>public</code> ضمن المجلد الجذري. يمكن الإشارة عندها إلى تلك الملفات باسم الملف يسبقه عنوان URL للجذر  (<code>/</code>).
 
−
 
 
−
لو أضفت الصورة <code>me.png</code> مثلًا إلى المجلد <code>public</code>، ستتمكن من الوصول إليها من خلال الشيفرة التالية:<syntaxhighlight lang="javascript">
 
 
import Image from 'next/image'
 
import Image from 'next/image'
  
سطر 11: سطر 10:
  
 
export default Avatar
 
export default Avatar
−
</syntaxhighlight>'''ملاحظة''': يتطلب استخدام المكتبة <code>next/image</code> النسخة 10 وما بعدها من Next.js.
+
</syntaxhighlight>
 +
 
 +
* ولهذا المجلد فائدته في احتواء ملفات أخرى مثل <code>robots.txt</code> و <code>favicon.ico</code> وتقنية Google للتحقق من المواقع Google Site Verification وغيرها من الملفات الساكنة بما فيها ملفات <code>html.</code>.
  
−
لهذا المجلد فائدته في احتواء ملفات أخرى مثل <code>robots.txt</code> و <code>favicon.ico</code> وتقنية Google للتحقق من المواقع Google Site Verification وغيرها من الملفات الساكنة بما فيها ملفات <code>html.</code>.
+
'''ملاحظات''':
  
−
'''ملاحظة''': لا تسمي المجلد <code>public</code> بأي اسم آخر. فلا يمكن تغيير اسم هذا المجلد وهو المجلد الوحيد الذي يخدّم التطبيق بالملفات الساكنة.
+
* يتطلب استخدام المكتبة <code>next/image</code> النسخة 10 وما بعدها من Next.js.
 +
* لا تُسمي المجلد <code>public</code> بأي اسم آخر. فلا يمكن تغيير اسم هذا المجلد وهو المجلد الوحيد الذي يخدّم التطبيق بالملفات الساكنة.
 +
* تأكد من عدم تسمية أي ملف موجود في المجلد <code>public</code> بنفس اسم ملف موجود في المجلد <code>/pages</code>، [https://nextjs.org/docs/messages/conflicting-public-file-page إذ يسبب ذلك خطأً.]
 +
* تخدّم Next.js أثناء بناء التطبيق الأصول assets في المجلد <code>public</code>، لكنها لن تخدم الأصول المتاحة أثناء التنفيذ. ننصح باستخدام خدمات مصدرها طرف آخر مثل [https://aws.amazon.com/s3/ AWS S3] لتوفير ملفات بصورة دائمة.
  
−
'''ملاحظة''': تأكد من عدم تسمية أي ملف موجود في المجلد <code>public</code> بنفس اسم ملف موجود في المجلد <code>/pages</code>، [https://nextjs.org/docs/messages/conflicting-public-file-page إذ يسبب ذلك خطأً.]
+
== المصادر ==
  
−
'''ملاحظة''': تخدّم أثناء بناء التطبيق الموجودات في المجلد لكنها لن تخدم الموجودات التي تتاح أثناء التنفيذ. ننصح باستخدام خدمات مصدرها طرف آخر مثل [https://aws.amazon.com/s3/ AWS S3] لتخديم الملفات المخزنة دون انقطاع.
+
* الصفحة [https://nextjs.org/docs/basic-features/static-file-serving Static file serving] من توثيق Next.js الرسمي.
 +
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
 +
[[تصنيف:Next.js Basic Features|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 17:20، 3 يناير 2023

تستطيع Next.js تخديم الملفات الساكنة static files أي الملفات الثابتة التي لا تتغير مثل الصور التي توجد في المجلد public ضمن المجلد الجذري. يمكن الإشارة عندها إلى تلك الملفات باسم الملف يسبقه عنوان URL الجذري /.

فلو أضفت الصورة me.png مثلًا إلى المجلد public، ستتمكن من الوصول إليها من خلال الشيفرة التالية:

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar
  • ولهذا المجلد فائدته في احتواء ملفات أخرى مثل robots.txt و favicon.ico وتقنية Google للتحقق من المواقع Google Site Verification وغيرها من الملفات الساكنة بما فيها ملفات html..

ملاحظات:

  • يتطلب استخدام المكتبة next/image النسخة 10 وما بعدها من Next.js.
  • لا تُسمي المجلد public بأي اسم آخر. فلا يمكن تغيير اسم هذا المجلد وهو المجلد الوحيد الذي يخدّم التطبيق بالملفات الساكنة.
  • تأكد من عدم تسمية أي ملف موجود في المجلد public بنفس اسم ملف موجود في المجلد /pages، إذ يسبب ذلك خطأً.
  • تخدّم Next.js أثناء بناء التطبيق الأصول assets في المجلد public، لكنها لن تخدم الأصول المتاحة أثناء التنفيذ. ننصح باستخدام خدمات مصدرها طرف آخر مثل AWS S3 لتوفير ملفات بصورة دائمة.

المصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Next.js/static_file_serving&oldid=32597"