دليل خطوة بخطوة لتثبيت وهيكلة تطبيق Next.js للأداء الأمثل

مرحباً بكم في حلقة أخرى من سلسلة دروسنا حول Next.js 14! اليوم، نتعمق في أساسيات البدء مع تطبيق Next.js باستخدام App Router القوي. سيرشدك دليلنا الشامل خلال عملية التثبيت ويوضح لك كيفية هيكلة تطبيقك لتحقيق الأداء الأمثل.

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

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

قبل البدء، تأكد من أن بيئة التطوير الخاصة بك تلبي المتطلبات التالية:

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

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

الخطوة 1: إنشاء مشروعك

إحدى أسهل الطرق لبدء تطبيق Next.js الخاص بك هي باستخدام أمر create-next-app، الذي يؤتمت عملية الإعداد. افتح الطرفية وشغّل:

npx create-next-app@latest

ستُطرح عليك سلسلة من الأسئلة لتخصيص إعداد تطبيقك:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

الخطوة 2: هيكل المجلدات

بعد إكمال المطالبات، سينشئ create-next-app مجلد مشروعك ويثبت التبعيات الضرورية. إذا اخترت استخدام App Router، سيظهر الهيكل الأساسي التالي في تطبيقك:

- my-app/
  - app/
    - layout.tsx
    - page.tsx
  - public/
  - package.json
  - tsconfig.json
  - next.config.js

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

إذا كنت تفضل الإعداد اليدوي أو تريد فهم التفاصيل الداخلية، اتبع هذه الخطوات:

الخطوة 1: تهيئة المشروع

أولاً، أنشئ مجلد مشروع وهيئه:

mkdir my-next-app
cd my-next-app
npm init -y

الخطوة 2: تثبيت التبعيات

بعد ذلك، ثبّت الحزم الضرورية:

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

الخطوة 3: تهيئة السكريبتات

أضف السكريبتات التالية إلى ملف package.json لإدارة مراحل مختلفة من تطوير تطبيقك:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

هذه مهمة للفهم:

• dev: يبدأ Next.js في وضع التطوير.
• build: يبني التطبيق للإنتاج.
• start: يبدأ خادم إنتاج Next.js.
• lint: يفحص كودك باستخدام ESLint.

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

مجلد App

App Router هو نموذج التوجيه المفضل للتطبيقات الجديدة. يوفر وصولاً إلى أحدث ميزات React وهو طريقة أكثر مرونة لهيكلة تطبيقك.

أنشئ مجلد app وضمّن ملفي layout.tsx و page.tsx:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {children}
    </div>
  );
}
 
// app/page.tsx
export default function Page() {
  return (
    <h1>Hello, Next.js!</h1>
  );
}

هيكلة تطبيقك

التخطيط الجذري

يجب أن يتضمن layout.tsx الخاص بك الهيكل الأساسي لتطبيقك. سيحتوي هذا التخطيط الجذري على المكونات الفرعية المعروضة.

الصفحة الرئيسية

يعمل page.tsx كصفحتك الرئيسية الافتراضية، يعرض المحتوى عندما يتنقل المستخدم إلى المسار الجذري (/).

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

بمجرد إعداد هيكل المجلدات والملفات، يمكنك بدء تطبيقك باستخدام:

npm run dev

قم بزيارة http://localhost:3000 في متصفحك لرؤية تطبيق Next.js الخاص بك مباشرة. يمكنك تحرير app/page.tsx (أو pages/index.tsx) للعمل عليه فوراً.

الخلاصة

في هذا الدليل، غطينا كيفية تثبيت وتهيئة تطبيق Next.js 14 مع App Router الجديد. تم تصميم هذا الإعداد لتوفير الأداء الأمثل مع الحفاظ على قاعدة الكود منظمة وقابلة للإدارة.

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

المراجع:

المصدر: وثائق Next.js