عرض مصدر Next.js/getting started

<noinclude>{{DISPLAYTITLE:بدء استخدام Next.js}}</noinclude>

تشرح هذه الصفحة كيفية تثبيت إطار العمل Next.js وبدء استخدامه.

== متطلبات النظام ==
* حزمة Node.js نسختها [https://nodejs.org/en/ 14.6.0] أو أعلى
* نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس.

== التثبيت التلقائي لإطار عمل Next.js ==

من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام <code>create-next-app</code> وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق جديد، اكتب التعليمات التالية في طرفية Node.js:<syntaxhighlight start="1" lang="bash">
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
</syntaxhighlight>بإمكانك استخدام الراية <code>typescript--</code> إن أردت ان تبدأ بمشروع TypeScript:<syntaxhighlight start="1" lang="bash">
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescript
</syntaxhighlight>عند اكتمال التثبيت:

* شغل خادم التطوير على العنوان  <code><nowiki>http://localhost:3000</nowiki></code> مستخدمًا إحدى التعليمات التالية:
** <code>npm run dev</code> 
** <code>yarn dev</code> 
** <code>pnpm dev</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 lang="json">
"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>.
بُنيت  Next.js على مفهوم [[Next.js/pages|الصفحات]]، والصفحة هي [[React/components and props|مكوّن رياكت]] React Component يُصدَّر من ملفات موجودة في المجلد <code>pages</code> تحمل إحدى الامتدادات التالية  <code>js.</code> أو <code>jsx.</code> أو <code>ts.</code> أو <code>tsx.</code>. بإمكانك أيضًا إضافة معاملات المسارات الديناميكية مع اسم الملف.

ضع الملف <code>index.js</code> في المجلد <code>pages</code> حتى تبدأ العمل، فهي الصفحة التي يعرضها المتصفح عند زيارة المجلد الجذري لتطبيقك. وطّن الصفحة <code>pages/index.js</code> (اجعلها الصفحة الرئيسية) بإضافة المحتوى التالي لها:<syntaxhighlight lang="javascript">
function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage
</syntaxhighlight>بعد اكتمال التثبيت:

* نفّذ أحد الأوامر التالية لتشغّل خادم التطوير على العنوان <code><nowiki>http://localhost:3000</nowiki></code> :
** <code>npm run dev</code>
** <code>yarn dev</code>
** <code>pnpm dev</code>
* زر العنوان <code><nowiki>http://localhost:3000</nowiki></code> لاستعراض تطبيقك
* عدّل في الصفحة <code>pages/index.js</code> لترى النتيجة مباشرة على متصفحك.

ما فعلناه حتى اللحظة:

* تصريف compiling و [[Next.js/compiler|تجميع]] bundling تلقائي.
* تهيئة التحديث السريع لرياكت React Fast Refresh.
* تقديم الملفات الثابتة Static file serving من خلال المسار <code>public/</code> المرتبط بالعنوان الجذري <code>/</code>.

سيكون كل تطبيق جاهزًا لمرحلة الإنتاج ابتداءً من لحظة إنشائه، وهذا ما سنراه في توثيق توزيع التطبيقات.

== المصدر ==
*صفحات [https://nextjs.org/docs/getting-started Getting Started] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js Basic Features|{{SUBPAGENAME}}]]