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.

إنشاء مجلد pages

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

قم بإنشاء مجلد pages في جذر مشروعك. ثم أضف ملف index.tsx داخل مجلد pages الخاص بك. سيكون هذا صفحتك الرئيسية (/):

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

بعد ذلك، أضف ملف _app.tsx داخل pages/ لتحديد التخطيط العام. تعلم المزيد حول ملف App المخصص.

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

أخيرًا، أضف ملف _document.tsx داخل pages/ للتحكم في الاستجابة الأولية من الخادم. تعلم المزيد حول ملف Document المخصص.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

إنشاء مجلد 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. قم بتحرير ملف pages/index.tsx واحفظه لرؤية النتيجة المحدثة في متصفحك.

إعداد TypeScript

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

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

راجع صفحة مرجع 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 مع موجه الصفحات (Pages Router).

هيكل المشروع

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