xiaoyu2er · xiaoyu2er · Jun 4, 2025 · Jun 2, 2025
diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/01-installation.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/01-installation.mdx
@@ -0,0 +1,341 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:04:07.604Z
+title: كيفية إعداد مشروع Next.js جديد
+nav_title: التثبيت
+description: إنشاء تطبيق Next.js جديد باستخدام واجهة سطر الأوامر `create-next-app`، وإعداد TypeScript و ESLint و Module Path Aliases.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+## متطلبات النظام
+
+قبل البدء، تأكد من أن نظامك يستوفي المتطلبات التالية:
+
+- [Node.js 18.18](https://nodejs.org/) أو أحدث.
+- نظام macOS أو Windows (بما في ذلك WSL) أو Linux.
+
+## التثبيت التلقائي
+
+أسرع طريقة لإنشاء تطبيق Next.js جديد هي استخدام [`create-next-app`](/docs/app/api-reference/cli/create-next-app)، والذي يقوم بإعداد كل شيء تلقائيًا لك. لإنشاء مشروع، قم بتنفيذ:
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+عند التثبيت، سترى المطالبات التالية:
+
+```txt filename="Terminal"
+ما هو اسم مشروعك؟ my-app
+هل ترغب في استخدام TypeScript؟ لا / نعم
+هل ترغب في استخدام ESLint؟ لا / نعم
+هل ترغب في استخدام Tailwind CSS؟ لا / نعم
+هل ترغب في وضع الكود داخل مجلد `src/`؟ لا / نعم
+هل ترغب في استخدام App Router؟ (موصى به) لا / نعم
+هل ترغب في استخدام Turbopack لـ `next dev`؟ لا / نعم
+هل ترغب في تخصيص Import Alias (الافتراضي `@/*`)؟ لا / نعم
+ما Import Alias الذي ترغب في تكوينه؟ @/*
+```
+
+بعد المطالبات، سيقوم [`create-next-app`](/docs/app/api-reference/cli/create-next-app) بإنشاء مجلد باسم مشروعك وتثبيت التبعيات المطلوبة.
+
+## التثبيت اليدوي
+
+لإنشاء تطبيق Next.js جديد يدويًا، قم بتثبيت الحزم المطلوبة:
+
+```bash filename="Terminal"
+npm install next@latest react@latest react-dom@latest
+```
+
+ثم أضف السكربتات التالية إلى ملف `package.json` الخاص بك:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
+```
+
+تشير هذه السكربتات إلى مراحل مختلفة من تطوير التطبيق:
+
+- `next dev`: يبدأ خادم التطوير.
+- `next build`: يقوم ببناء التطبيق للإنتاج.
+- `next start`: يبدأ خادم الإنتاج.
+- `next lint`: يقوم بتشغيل ESLint.
+
+<AppOnly>
+
+### إنشاء مجلد `app`
+
+يستخدم Next.js توجيه نظام الملفات، مما يعني أن المسارات في تطبيقك يتم تحديدها من خلال كيفية تنظيم ملفاتك.
+
+قم بإنشاء مجلد `app`. ثم، داخل `app`، قم بإنشاء ملف `layout.tsx`. هذا الملف هو [تخطيط الجذر](/docs/app/api-reference/file-conventions/layout#root-layout). وهو مطلوب ويجب أن يحتوي على وسمي `<html>` و `<body>`.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+قم بإنشاء صفحة رئيسية `app/page.tsx` مع بعض المحتوى الأولي:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+سيتم عرض كل من `layout.tsx` و `page.tsx` عندما يزور المستخدم جذر تطبيقك (`/`).
+
+<Image
+  alt="هيكل مجلد التطبيق"
+  srcLight="/docs/light/app-getting-started.png"
+  srcDark="/docs/dark/app-getting-started.png"
+  width="1600"
+  height="363"
+/>
+
+> **معلومة مفيدة**:
+>
+> - إذا نسيت إنشاء تخطيط الجذر، سيقوم Next.js تلقائيًا بإنشاء هذا الملف عند تشغيل خادم التطوير باستخدام `next dev`.
+> - يمكنك اختياريًا استخدام مجلد [`src`](/docs/app/api-reference/file-conventions/src-folder) في جذر مشروعك لفصل كود التطبيق عن ملفات التكوين.
+
+</AppOnly>
+
+<PagesOnly>
+
+### إنشاء مجلد `pages`
+
+يستخدم Next.js توجيه نظام الملفات، مما يعني أن المسارات في تطبيقك يتم تحديدها من خلال كيفية تنظيم ملفاتك.
+
+قم بإنشاء مجلد `pages` في جذر مشروعك. ثم أضف ملف `index.tsx` داخل مجلد `pages` الخاص بك. سيكون هذا صفحتك الرئيسية (`/`):
+
+```tsx filename="pages/index.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+بعد ذلك، أضف ملف `_app.tsx` داخل `pages/` لتحديد التخطيط العام. تعلم المزيد حول [ملف App المخصص](/docs/pages/building-your-application/routing/custom-app).
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+أخيرًا، أضف ملف `_document.tsx` داخل `pages/` للتحكم في الاستجابة الأولية من الخادم. تعلم المزيد حول [ملف Document المخصص](/docs/pages/building-your-application/routing/custom-document).
+
+```tsx filename="pages/_document.tsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+```jsx filename="pages/_document.js" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+</PagesOnly>
+
+### إنشاء مجلد `public` (اختياري)
+
+قم بإنشاء مجلد [`public`](/docs/app/api-reference/file-conventions/public-folder) في جذر مشروعك لتخزين الأصول الثابتة مثل الصور والخطوط وما إلى ذلك. يمكن بعد ذلك الإشارة إلى الملفات داخل `public` من خلال الكود الخاص بك بدءًا من عنوان URL الأساسي (`/`).
+
+يمكنك بعد ذلك الإشارة إلى هذه الأصول باستخدام المسار الجذري (`/`). على سبيل المثال، يمكن الإشارة إلى `public/profile.png` كـ `/profile.png`:
+
+```tsx filename="app/page.tsx" highlight={4} switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
+}
+```
+
+```jsx filename="app/page.js" highlight={4} switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
+}
+```
+
+## تشغيل خادم التطوير
+
+1. قم بتشغيل `npm run dev` لبدء خادم التطوير.
+2. قم بزيارة `http://localhost:3000` لعرض تطبيقك.
+3. قم بتحرير ملف <AppOnly>`app/page.tsx`</AppOnly><PagesOnly>`pages/index.tsx`</PagesOnly> واحفظه لرؤية النتيجة المحدثة في متصفحك.
+
+## إعداد TypeScript
+
+> الحد الأدنى لإصدار TypeScript: `v4.5.2`
+
+يأتي Next.js مع دعم مدمج لـ TypeScript. لإضافة TypeScript إلى مشروعك، قم بإعادة تسمية ملف إلى `.ts` / `.tsx` وقم بتشغيل `next dev`. سيقوم Next.js تلقائيًا بتثبيت التبعيات الضرورية وإضافة ملف `tsconfig.json` مع خيارات التكوين الموصى بها.
+
+<AppOnly>
+
+### ملحق IDE
+
+يتضمن Next.js ملحق TypeScript مخصصًا ومدقق نوع، والذي يمكن أن تستخدمه VSCode ومحررات الأكواد الأخرى للتحقق المتقدم من الأنواع والإكمال التلقائي.
+
+يمكنك تمكين الملحق في VS Code عن طريق:
+
+1. فتح لوحة الأوامر (`Ctrl/⌘` + `Shift` + `P`)
+2. البحث عن "TypeScript: Select TypeScript Version"
+3. اختيار "Use Workspace Version"
+
+<Image
+  alt="لوحة أوامر TypeScript"
+  srcLight="/docs/light/typescript-command-palette.png"
+  srcDark="/docs/dark/typescript-command-palette.png"
+  width="1600"
+  height="637"
+/>
+
+</AppOnly>
+
+راجع صفحة [مرجع TypeScript](/docs/app/api-reference/config/next-config-js/typescript) لمزيد من المعلومات.
+
+## إعداد ESLint
+
+يأتي Next.js مع ESLint مدمج. يقوم تلقائيًا بتثبيت الحزم الضرورية وتكوين الإعدادات المناسبة عند إنشاء مشروع جديد باستخدام `create-next-app`.
+
+لإضافة ESLint يدويًا إلى مشروع موجود، أضف `next lint` كسكربت إلى `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "lint": "next lint"
+  }
+}
+```
+
+ثم قم بتشغيل `npm run lint` وسيتم توجيهك خلال عملية التثبيت والتكوين.
+
+```bash filename="Terminal"
+npm run lint
+```
+
+سترى مطالبة مثل هذه:
+
+> ? كيف ترغب في تكوين ESLint؟
+>
+> ❯ صارم (موصى به)  
+> أساسي  
+> إلغاء
+
+- **صارم**: يتضمن تكوين ESLint الأساسي لـ Next.js مع مجموعة قواعد أكثر صرامة لـ Core Web Vitals. هذا هو التكوين الموصى به للمطورين الذين يقومون بإعداد ESLint لأول مرة.
+- **أساسي**: يتضمن تكوين ESLint الأساسي لـ Next.js.
+- **إلغاء**: تخطي التكوين. اختر هذا الخيار إذا كنت تخطط لإعداد تكوين ESLint مخصص خاص بك.
+
+إذا تم اختيار **صارم** أو **أساسي**، سيقوم Next.js تلقائيًا بتثبيت `eslint` و `eslint-config-next` كتبعيات في تطبيقك وإنشاء ملف `.eslintrc.json` في جذر مشروعك يتضمن التكوين الذي اخترته.
+
+يمكنك الآن تشغيل `next lint` في أي وقت تريد تشغيل ESLint للكشف عن الأخطاء. بمجرد إعداد ESLint، سيتم تشغيله تلقائيًا أيضًا خلال كل بناء (`next build`). ستؤدي الأخطاء إلى فشل البناء، بينما لن تؤدي التحذيرات إلى ذلك.
+
+راجع صفحة [ملحق ESLint](/docs/app/api-reference/config/next-config-js/eslint) لمزيد من المعلومات.
+
+## إعداد الاستيراد المطلق و Module Path Aliases
+
+يحتوي Next.js على دعم مدمج لخيارات `"paths"` و `"baseUrl"` لملفات `tsconfig.json` و `jsconfig.json`.
+
+تتيح لك هذه الخيارات تعيين مسارات المجلدات في المشروع إلى مسارات مطلقة، مما يجعل استيراد الوحدات أسهل وأنظف. على سبيل المثال:
+
+```jsx
+// قبل
+import { Button } from '../../../components/button'
+
+// بعد
+import { Button } from '@/components/button'
+```
+
+لتكوين الاستيراد المطلق، أضف خيار `baseUrl` إلى ملف `tsconfig.json` أو `jsconfig.json` الخاص بك. على سبيل المثال:
+
+```json filename="tsconfig.json or jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "src/"
+  }
+}
+```
+
+بالإضافة إلى تكوين مسار `baseUrl`، يمكنك استخدام خيار `"paths"` لـ `"alias"` مسارات الوحدات.
+
+على سبيل المثال، يقوم التكوين التالي بتعيين `@/components/*` إلى `components/*`:
+
+```json filename="tsconfig.json or jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "src/",
+    "paths": {
+      "@/styles/*": ["styles/*"],
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+كل من `"paths"` مرتبطة بموقع `baseUrl`.