الفرق بين المراجعتين لصفحة: «Next.js»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 29: | سطر 29: | ||
* زر العنوان السابق للاطلاع على تطبيقك. | * زر العنوان السابق للاطلاع على تطبيقك. | ||
* عدّل الصفحة <code>pages/index.js</code> وراقب نتيجة ما فعلته في المتصفح. | * عدّل الصفحة <code>pages/index.js</code> وراقب نتيجة ما فعلته في المتصفح. | ||
لمزيد من المعلومات حول <code>create-next-app</code>، حاول الإطلاع على التوثيقات الخاصة به. | |||
=== التثبيت اليدوي === | |||
ثبت <code>next</code> و <code>react</code> و <code>react-dom</code> في مشروعك كالتالي:<syntaxhighlight lang="bash"> | |||
npm install next react react-dom | |||
# or | |||
yarn add next react react-dom | |||
# or | |||
pnpm add next react react-dom | |||
</syntaxhighlight>افتح الملف <code>package.json</code> ثم أضف الشيفرة التالية:<syntaxhighlight> | |||
"scripts": { | |||
"dev": "next dev", | |||
"build": "next build", | |||
"start": "next start", | |||
"lint": "next lint" | |||
} | |||
</syntaxhighlight>تشير هذه الشيفرة إلى المراحل المختلفة لتطوير التطبيق: | |||
* <code>dev</code> : ينفذ الأمر <code>next dev</code> للعمل مع Next.js في نمط التطوير. | |||
* <code>build</code>: ينفذ الأمر <code>next build</code> لبناء تطبيق يعمل في نمط الإنتاج. | |||
* <code>start</code>: ينفذ الأمر <code>next start</code> لتشغيل خادم إنتاج Next.js. | |||
* <code>lint</code>: ينفذ الأمر <code>next lint</code> لتهيئة مدقق ESLint المدمج مع Next.js. | |||
أنشئ بعد ذلك مجلدين الأول يحمل الاسم <code>pages</code> والآخر <code>public</code> ضمن الملف الجذري لتطبيقك: | |||
* <code>pages</code>: ويمثل جذرًا لعناوبن الملفات التي يضمها، إذ يقترن المسار <code>pages/about.js</code> مثلًا بالمسار <code>/about</code>. | |||
* <code>public</code>: يخزّن موارد الدعم كالصور وخطوط الكتابة وغيرها. يمكن الإشارة إلى الملفات الموجودة ضمن هذا المجلد انطلاقًا من العنوان الجذري <code>/</code> تمامًا كالملفات الموجودة ضمن <code>pages</code>. | |||
== الميزات الأساسية == | == الميزات الأساسية == | ||
مراجعة 17:38، 2 مايو 2022
البدء مع Next.js
مرحبًا بك إلى توثيقات Next.js باللغة العربية!
متطلبات النظام:
- حزمة Node.js نسختها 12.22.0 أو أعلى
- نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس.
التثبيت التلقائي لإطار عمل Next.js
من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام create-next-app وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق جديد في Next.js، اكتب التعليمات التالية في طرفية Node.js:
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-appبإمكانك استخدام الراية typescript-- إن أردت ان تبدأ بمشروع TypeScript:
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescriptعند اكتمال التثبيت:
- شغل خادم التطوير على العنوان
http://localhost:3000مستخدمًا إحدى التعليمات التالية:npm run devyarn devpnpm dev
- زر العنوان السابق للاطلاع على تطبيقك.
- عدّل الصفحة
pages/index.jsوراقب نتيجة ما فعلته في المتصفح.
لمزيد من المعلومات حول create-next-app، حاول الإطلاع على التوثيقات الخاصة به.
التثبيت اليدوي
ثبت next و react و react-dom في مشروعك كالتالي:
npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom
افتح الملف package.json ثم أضف الشيفرة التالية:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}تشير هذه الشيفرة إلى المراحل المختلفة لتطوير التطبيق:
dev: ينفذ الأمرnext devللعمل مع Next.js في نمط التطوير.build: ينفذ الأمرnext buildلبناء تطبيق يعمل في نمط الإنتاج.start: ينفذ الأمرnext startلتشغيل خادم إنتاج Next.js.lint: ينفذ الأمرnext lintلتهيئة مدقق ESLint المدمج مع Next.js.
أنشئ بعد ذلك مجلدين الأول يحمل الاسم pages والآخر public ضمن الملف الجذري لتطبيقك:
pages: ويمثل جذرًا لعناوبن الملفات التي يضمها، إذ يقترن المسارpages/about.jsمثلًا بالمسار/about.public: يخزّن موارد الدعم كالصور وخطوط الكتابة وغيرها. يمكن الإشارة إلى الملفات الموجودة ضمن هذا المجلد انطلاقًا من العنوان الجذري/تمامًا كالملفات الموجودة ضمنpages.