logoNext.js العربية
التوثيقالمدونةالتعلم
مقدمة/البدء/التثبيت

كيفية إعداد مشروع Next.js جديد

متطلبات النظام

قبل البدء، تأكد من أن نظامك يستوفي المتطلبات التالية:

  • Node.js 18.18 أو أحدث.
  • نظام macOS أو Windows (بما في ذلك WSL) أو Linux.

التثبيت التلقائي

أسرع طريقة لإنشاء تطبيق Next.js جديد هي استخدام create-next-app، والذي يقوم بإعداد كل شيء تلقائيًا لك. لإنشاء مشروع، قم بتنفيذ:

Terminal
npx create-next-app@latest

عند التثبيت، سترى المطالبات التالية:

Terminal
ما هو اسم مشروعك؟ my-app
هل ترغب في استخدام TypeScript؟ لا / نعم
هل ترغب في استخدام ESLint؟ لا / نعم
هل ترغب في استخدام Tailwind CSS؟ لا / نعم
هل ترغب في وضع الكود داخل مجلد `src/`؟ لا / نعم
هل ترغب في استخدام App Router؟ (موصى به) لا / نعم
هل ترغب في استخدام Turbopack لـ `next dev`؟ لا / نعم
هل ترغب في تخصيص Import Alias (الافتراضي `@/*`)؟ لا / نعم
ما Import Alias الذي ترغب في تكوينه؟ @/*

بعد المطالبات، سيقوم create-next-app بإنشاء مجلد باسم مشروعك وتثبيت التبعيات المطلوبة.

التثبيت اليدوي

لإنشاء تطبيق Next.js جديد يدويًا، قم بتثبيت الحزم المطلوبة:

Terminal
npm install next@latest react@latest react-dom@latest

ثم أضف السكربتات التالية إلى ملف package.json الخاص بك:

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

تشير هذه السكربتات إلى مراحل مختلفة من تطوير التطبيق:

  • next dev: يبدأ خادم التطوير.
  • next build: يقوم ببناء التطبيق للإنتاج.
  • next start: يبدأ خادم الإنتاج.
  • next lint: يقوم بتشغيل ESLint.

إنشاء مجلد app

يستخدم Next.js توجيه نظام الملفات، مما يعني أن المسارات في تطبيقك يتم تحديدها من خلال كيفية تنظيم ملفاتك.

قم بإنشاء مجلد app. ثم، داخل app، قم بإنشاء ملف layout.tsx. هذا الملف هو تخطيط الجذر. وهو مطلوب ويجب أن يحتوي على وسمي <html> و <body>.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

قم بإنشاء صفحة رئيسية app/page.tsx مع بعض المحتوى الأولي:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

سيتم عرض كل من layout.tsx و page.tsx عندما يزور المستخدم جذر تطبيقك (/).

هيكل مجلد التطبيق

معلومة مفيدة:

  • إذا نسيت إنشاء تخطيط الجذر، سيقوم Next.js تلقائيًا بإنشاء هذا الملف عند تشغيل خادم التطوير باستخدام next dev.
  • يمكنك اختياريًا استخدام مجلد src في جذر مشروعك لفصل كود التطبيق عن ملفات التكوين.

إنشاء مجلد public (اختياري)

قم بإنشاء مجلد public في جذر مشروعك لتخزين الأصول الثابتة مثل الصور والخطوط وما إلى ذلك. يمكن بعد ذلك الإشارة إلى الملفات داخل public من خلال الكود الخاص بك بدءًا من عنوان URL الأساسي (/).

يمكنك بعد ذلك الإشارة إلى هذه الأصول باستخدام المسار الجذري (/). على سبيل المثال، يمكن الإشارة إلى public/profile.png كـ /profile.png:

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}
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. قم بتحرير ملف app/page.tsx واحفظه لرؤية النتيجة المحدثة في متصفحك.

إعداد TypeScript

الحد الأدنى لإصدار TypeScript: v4.5.2

يأتي Next.js مع دعم مدمج لـ TypeScript. لإضافة TypeScript إلى مشروعك، قم بإعادة تسمية ملف إلى .ts / .tsx وقم بتشغيل next dev. سيقوم Next.js تلقائيًا بتثبيت التبعيات الضرورية وإضافة ملف tsconfig.json مع خيارات التكوين الموصى بها.

ملحق IDE

يتضمن Next.js ملحق TypeScript مخصصًا ومدقق نوع، والذي يمكن أن تستخدمه VSCode ومحررات الأكواد الأخرى للتحقق المتقدم من الأنواع والإكمال التلقائي.

يمكنك تمكين الملحق في VS Code عن طريق:

  1. فتح لوحة الأوامر (Ctrl/⌘ + Shift + P)
  2. البحث عن "TypeScript: Select TypeScript Version"
  3. اختيار "Use Workspace Version"
لوحة أوامر TypeScript

راجع صفحة مرجع TypeScript لمزيد من المعلومات.

إعداد ESLint

يأتي Next.js مع ESLint مدمج. يقوم تلقائيًا بتثبيت الحزم الضرورية وتكوين الإعدادات المناسبة عند إنشاء مشروع جديد باستخدام create-next-app.

لإضافة ESLint يدويًا إلى مشروع موجود، أضف next lint كسكربت إلى package.json:

package.json
{
  "scripts": {
    "lint": "next lint"
  }
}

ثم قم بتشغيل npm run lint وسيتم توجيهك خلال عملية التثبيت والتكوين.

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 لمزيد من المعلومات.

إعداد الاستيراد المطلق و Module Path Aliases

يحتوي Next.js على دعم مدمج لخيارات "paths" و "baseUrl" لملفات tsconfig.json و jsconfig.json.

تتيح لك هذه الخيارات تعيين مسارات المجلدات في المشروع إلى مسارات مطلقة، مما يجعل استيراد الوحدات أسهل وأنظف. على سبيل المثال:

// قبل
import { Button } from '../../../components/button'

// بعد
import { Button } from '@/components/button'

لتكوين الاستيراد المطلق، أضف خيار baseUrl إلى ملف tsconfig.json أو jsconfig.json الخاص بك. على سبيل المثال:

tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

بالإضافة إلى تكوين مسار baseUrl، يمكنك استخدام خيار "paths" لـ "alias" مسارات الوحدات.

على سبيل المثال، يقوم التكوين التالي بتعيين @/components/* إلى components/*:

tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

كل من "paths" مرتبطة بموقع baseUrl.

البدء

تعرف على كيفية إنشاء تطبيقات ويب كاملة المكدس باستخدام موجه تطبيق Next.js.

هيكل المشروع

نظرة عامة على اصطلاحات المجلدات والملفات في Next.js، وكيفية تنظيم مشروعك.