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

التثبيت

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

  • Node.js 16.14 أو أحدث.
  • أنظمة التشغيل المدعومة: 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 الآن مع تكوينات 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

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

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

البدء

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

هيكل المشروع

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