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

التثبيت

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

  • Node.js 18.17 أو أحدث.
  • أنظمة التشغيل المدعومة: macOS وWindows (بما في ذلك WSL) وLinux.

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

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

Terminal
npx create-next-app@latest

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

Terminal
ما هو اسم مشروعك؟ my-app
هل ترغب في استخدام TypeScript؟ لا / نعم
هل ترغب في استخدام ESLint؟ لا / نعم
هل ترغب في استخدام Tailwind CSS؟ لا / نعم
هل ترغب في استخدام مجلد `src/`؟ لا / نعم
هل ترغب في استخدام موجه التطبيق (موصى به)؟ لا / نعم
هل ترغب في تخصيص اسم الاستيراد الافتراضي (@/*)؟ لا / نعم
ما هو اسم الاستيراد الذي تريد تهيئته؟ @/*

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

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

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

  • يأتي Next.js الآن مع تهيئة افتراضية لـ TypeScript وESLint وTailwind CSS.
  • يمكنك اختياريًا استخدام مجلد src في جذر مشروعك لفصل كود التطبيق عن ملفات التهيئة.

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

لإنشاء تطبيق 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"
  }
}

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

  • dev: يشغل next dev لبدء Next.js في وضع التطوير.
  • build: يشغل next build لبناء التطبيق للاستخدام في الإنتاج.
  • start: يشغل next start لبدء خادم Next.js للإنتاج.
  • lint: يشغل next lint لإعداد تهيئة ESLint المدمجة في Next.js.

إنشاء المجلدات

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

مجلد app

لتطبيقات جديدة، نوصي باستخدام موجه التطبيق. يسمح لك هذا الموجه باستخدام أحدث ميزات React وهو تطور لـ موجه الصفحات بناءً على ملاحظات المجتمع.

قم بإنشاء مجلد app/، ثم أضف ملف layout.tsx وملف page.tsx. سيتم عرض هذه الملفات عندما يزور المستخدم جذر تطبيقك (/).

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

قم بإنشاء تخطيط جذر داخل 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، فسيقوم Next.js تلقائيًا بإنشاء هذا الملف عند تشغيل خادم التطوير باستخدام next dev.

تعلم المزيد حول استخدام موجه التطبيق.

مجلد pages (اختياري)

إذا كنت تفضل استخدام موجه الصفحات بدلاً من موجه التطبيق، يمكنك إنشاء مجلد pages/ في جذر مشروعك.

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

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

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

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/ للتحكم في الاستجابة الأولية من الخادم. تعلم المزيد حول ملف المستند المخصص.

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

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

تعلم المزيد حول استخدام موجه الصفحات.

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

مجلد public (اختياري)

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

تشغيل خادم التطوير

  1. قم بتنفيذ npm run dev لبدء خادم التطوير.
  2. قم بزيارة http://localhost:3000 لعرض تطبيقك.
  3. قم بتعديل ملف app/page.tsx (أو pages/index.tsx) واحفظه لرؤية النتيجة المحدثة في متصفحك.

البدء

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

هيكل المشروع

قائمة باتفاقيات المجلدات والملفات في مشروع Next.js