الدليل التفصيلي لتثبيت وهيكلة تطبيقك في 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 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