أساسيات React: تثبيت Next.js

عند استخدام Next.js في مشروعك، لن تحتاج بعد الآن إلى تحميل سكريبتات react و react-dom من unpkg.com. بدلاً من ذلك، يمكنك تثبيت هذه الحزم محليًا باستخدام npm أو مدير الحزم المفضل لديك.

ملاحظة: لاستخدام Next.js، ستحتاج إلى تثبيت Node.js بالإصدار 18.17.0 أو أعلى على جهازك (راجع متطلبات الإصدار الأدنى)، يمكنك تنزيله من هنا.

لذلك، قم بإنشاء ملف جديد في نفس دليل ملف index.html الخاص بك، يُسمى package.json يحتوي على كائن فارغ {}.

package.json

{}

في الطرفية الخاصة بك، قم بتنفيذ الأمر التالي في جذر مشروعك:

Terminal

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

بمجرد اكتمال التثبيت، يجب أن تكون قادرًا على رؤية تبعيات مشروعك مدرجة داخل ملف package.json:

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

لا تقلق إذا كنت تستخدم إصدارات أحدث من تلك الموضحة أعلاه، طالما لديك حزم next و react و react-dom مثبتة، فأنت على ما يرام.

ستلاحظ أيضًا ملفًا جديدًا يُسمى package-lock.json يحتوي على معلومات مفصلة حول الإصدارات الدقيقة لكل حزمة.

بالعودة إلى ملف index.html، يمكنك حذف الأكواد التالية:

علامات <html> و <body>.
عنصر <div> ذو المعرف app.
سكريبتات react و react-dom حيث أنك قمت بتثبيتها عبر NPM.
سكريبت Babel لأن Next.js يحتوي على مترجم يحول JSX إلى JavaScript صالح يمكن للمتصفحات فهمه.
علامة <script type="text/jsx">.
دوال document.getElementById() و ReactDom.createRoot().
جزء React. من دالة React.useState(0)

بعد حذف الأسطر أعلاه، أضف الاستيراد التالي في أعلى الملف:

index.html

import { useState } from 'react';

يجب أن يبدو الكود الخاص بك كالتالي:

index.html

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'العنوان الافتراضي'}</h1>;
}
 
function HomePage() {
  const names = ['آدا لوفليس', 'غريس هوبر', 'مارغريت هاميلتون'];
 
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      <Header title="تطوير. معاينة. نشر." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
 
      <button onClick={handleClick}>إعجاب ({likes})</button>
    </div>
  );
}

بقي فقط كود JSX في ملف HTML، لذا يمكنك تغيير نوع الملف من .html إلى .js أو .jsx.

إنشاء أول صفحة لك

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

إليك كيفية إنشاء أول صفحة في Next.js:

أنشئ مجلدًا جديدًا يُسمى app وانقل ملف index.js بداخله.
أعد تسمية ملف index.js إلى page.js. سيكون هذا الصفحة الرئيسية لتطبيقك.
أضف export default إلى مكون <HomePage> لمساعدة Next.js على تمييز المكون الذي يجب عرضه كمكون رئيسي للصفحة.

app/page.js

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'العنوان الافتراضي'}</h1>;
}
 
export default function HomePage() {
  // ...
}

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

بعد ذلك، لنقم بتشغيل خادم التطوير حتى تتمكن من رؤية التغييرات في صفحتك الجديدة أثناء التطوير. أضف سكريبت "next dev" إلى ملف package.json:

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

تحقق مما يحدث عن طريق تشغيل npm run dev في طرفيتك. ستلاحظ شيئين:

عند الانتقال إلى localhost:3000، يجب أن ترى الخطأ التالي:

رسالة خطأ Next.js: أنت تستورد مكونًا يحتاج إلى useState. يعمل فقط في مكون العميل...

هذا لأن Next.js يستخدم مكونات خادم React، وهي ميزة جديدة تسمح لـ React بالعرض على الخادم. لا تدعم مكونات الخادم useState، لذا ستحتاج إلى استخدام مكون عميل بدلاً من ذلك.

في الفصل التالي، سنناقش الفروق الرئيسية بين مكونات الخادم والعميل ونصلح هذا الخطأ.

تم إنشاء ملف جديد تلقائيًا يُسمى layout.js داخل مجلد app. هذا هو التخطيط الرئيسي لتطبيقك. يمكنك استخدامه لإضافة عناصر واجهة مستخدم مشتركة بين جميع الصفحات (مثل التنقل، التذييل، إلخ).

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'تم إنشاؤه بواسطة Next.js',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

ملخص

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

قمت بإزالة سكريبتات React وBabel؛ لم تعد بحاجة للتفكير في أدوات التكوين المعقدة.
قمت بإنشاء أول صفحة لك.

قراءة إضافية:

أساسيات التوجيه في Next.js

تحديد المسارات

الصفحات والتخطيطات

تثبيت Next.js

إنشاء أول صفحة لك

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

ملخص

On this page