الفرق بين المراجعتين ل"Next.js/static file serving"
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:تخديم الملفات الساكنة في Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:تخديم الملفات الساكنة في Next.js}}</noinclude> | ||
| − | تستطيع Next.js تخديم الملفات الساكنة مثل الصور | + | تستطيع 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' | ||
| سطر 14: | سطر 14: | ||
لهذا المجلد فائدته في احتواء ملفات أخرى مثل <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>public</code> بنفس اسم ملف موجود في المجلد <code>/pages</code>، [https://nextjs.org/docs/messages/conflicting-public-file-page إذ يسبب ذلك خطأً.] | '''ملاحظة''': تأكد من عدم تسمية أي ملف موجود في المجلد <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] لتخديم الملفات المخزنة دون انقطاع. |
== المصادر == | == المصادر == | ||
* الصفحة [https://nextjs.org/docs/basic-features/static-file-serving Static file serving] من توثيق Next.js الرسمي. | * الصفحة [https://nextjs.org/docs/basic-features/static-file-serving Static file serving] من توثيق Next.js الرسمي. | ||
مراجعة 17:21، 28 مايو 2022
تستطيع Next.js تخديم الملفات الساكنة مثل الصور التي توجد في المجلد 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
ملاحظة: يتطلب استخدام المكتبة next/image النسخة 10 وما بعدها من Next.js.
لهذا المجلد فائدته في احتواء ملفات أخرى مثل robots.txt و favicon.ico وتقنية Google للتحقق من المواقع Google Site Verification وغيرها من الملفات الساكنة بما فيها ملفات html..
ملاحظة: لا تُسمي المجلد public بأي اسم آخر. فلا يمكن تغيير اسم هذا المجلد وهو المجلد الوحيد الذي يخدّم التطبيق بالملفات الساكنة.
ملاحظة: تأكد من عدم تسمية أي ملف موجود في المجلد public بنفس اسم ملف موجود في المجلد /pages، إذ يسبب ذلك خطأً.
ملاحظة: تخدّم Next.js أثناء بناء التطبيق الموجودات assets في المجلد public، لكنها لن تخدم الموجودات المتاحة أثناء التنفيذ. ننصح باستخدام خدمات مصدرها طرف آخر مثل AWS S3 لتخديم الملفات المخزنة دون انقطاع.
المصادر
- الصفحة Static file serving من توثيق Next.js الرسمي.