الدليل الشامل لتعلم Next.js للمبتدئين

ما هو Next.js

في عالم تطوير الويب، يُعد Next.js أحد أقوى أطر العمل التي يمكن استخدامها لإنشاء تطبيقات الويب الحديثة فهو يتميز بسهولة استخدامه و دعمه لتحسين الظهور في محركات البحث ( SEO ).

مميزات Next.js

Next.js هو إطار عمل مبني على React و لكنه يضيف عليها ميزات قوية مثل:

• التصيير من جهة الخادم ( SSR ) – تحميل المحتوى ديناميكياً مع تحسين أداء محركات البحث.
• التصيير عند البناء ( SSG ) – إنشاء صفحات ثابتة مسبقاً لزيادة سرعة التحميل.
• التحديث التدريجي ( ISR ) – تحديث البيانات جزئياً دون الحاجة إلى إعادة بناء التطبيق.
• التنقل السهل ( Routing ) – التنقل بين الصفحات لا يحتاج أي إعدادات فهو قائم على أسلوب ترتيب الملفات.
• دعم API Routes – يمكنك إنشاء خوادم API داخل التطبيق نفسه.

تثبيت أدوات Next.js

لتتمكن من إنشاء و تشغيل مشاريع Next.js تحتاج إلى تثبيت خادم Node.js على جهازك فهو يتضمن كل الأدوات التي تحتاجها لذلك.

إنشاء و تشغيل مشروع Next.js

بعدما تأكدت أن جهازك عليه Node.js قم بتنفيذ الأوامر التالية تباعاً:

1- الأمر التالي ينشئ مشروع جديد إسمه my-next-app.

npx create-next-app@latest my-next-app

2- الأمر التالي يقوم بالإنتقال إلى المشروع my-next-app.

cd my-next-app

3- الأمر التالي يقوم بتشغيل المشروع my-next-app و من ثم يفتحه في المتصفح.

npm run dev

هيكلة المشروع في Next.js

ملفات المشروع في Next.js تكون مرتبة على النحو التالي:

• المجلد /pages _ يحتوي على الصفحات، مثل index.js و about.js.
• المجلد /public _ تخزين الصور والملفات العامة.
• المجلد /styles _ ملفات CSS.
• المجلد /components _ مكونات React القابلة لإعادة الاستخدام
• المجلد /api _ مسارات API داخل Next.js.

فيما يلي، مخطط توضيحي لهيكلة المشروع في Next.js.

my-next-app/
 ├── node_modules/
 │── pages/ 
 │  │── index.js 
 │  └── api/ 
 │── components/ 
 │── public/ 
 │── styles/ 
 └── package.json 

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

يستخدم Next.js نظام توجيه قائم على الملفات، أي أن أي ملف داخل pages/ يصبح تلقائياً مساراً.

كمثال على إنشاء صفحة جديدة، أضف ملف إسمه about.js داخل pages/ و اكتب الكود التالي.

export default function About() { 
    return <h1>About Page</h1>; 
}

المسارات الديناميكية ( Dynamic Routing )

لإنشاء صفحات ديناميكية، أضف ملف إسمه [id].js داخل المسار pages/blog/ و أضف فيه الكود التالي.

import { useRouter } from 'next/router';

export default function BlogPost() {
    const router = useRouter();
    const { id } = router.query;

    return <h1>Blog Post ID: {id}</h1>;
}

Blog Post ID: 123

التصيير في Next.js

فيما يلي سنتطرق لثلاث أنواع من التصيير.

1- التصيير عند البناء

التصيير عند البناء ( Static Generation - SSG ) مناسب للصفحات الثابتة حيث يتم إنشاؤها مرة واحدة أثناء بناء التطبيق.

export async function getStaticProps() {
    return {
        props: { message: "Hello from Static Generation" },
    };
}

export default function Home({ message }) {
    return <h1>{message}</h1>;
}

2- التصيير من جهة الخادم

التصيير من جهة الخادم ( Server-Side Rendering - SSR ) يقصد به أنه يتم جلب البيانات كاملةً في كل مرة يطلب فيها المستخدم الصفحة.

export async function getServerSideProps() {
    return {
        props: { time: new Date().toLocaleTimeString() },
    };
}

export default function ServerTime({ time }) {
    return <h1>Current Time: {time}</h1>;
}

3- التصيير التدريجي

التصيير التدريجي أو المتوالي ( Incremental Static Regeneration - ISR ) يسمح بتحديث الصفحات بشكل دوري دون إعادة بناء التطبيق بالكامل.

export async function getStaticProps() {
    return {
        props: { time: new Date().toLocaleTimeString() },
        revalidate: 10, // يتم تحديث البيانات كل 10 ثوانٍ
    };
}

جلب البيانات في Next.js

لجلب البيانات، يمكنك بناء API داخلي على النحو التالي:

1- أنشئ ملف API في هذا المسار pages/api/products.js و أضف فيه الكود التالي.

export default function handler(req, res) {
    res.status(200).json([
        {id: 1, name: "Laptop"},
        {id: 2, name: "Phone"}
    ]);
}

2- الآن يمكنك جلب البيانات من products.js على النحو التالي.

export async function getServerSideProps() {
    const res = await fetch("http://localhost:3000/api/products");
    const data = await res.json();

    return { props: { products: data } };
}

export default function Products({ products }) {
    return (
        <ul>
            {products.map((p) => (<li key={p.id}>{p.name}</li>))}
        </ul>
    );
}

تحسين SEO في Next.js

لتحسين ظهور الموقع في محركات البحث استخدم next/head لإضافة وسوم <meta> على النحو التالي.

import Head from "next/head";

export default function Home() {
    return (
        <>
            <Head>
                <title>Next.js SEO Example</title>
                <meta name="description" content="This is a Next.js SEO example" />
            </Head>
            <h1>Welcome to Next.js!</h1>
        </>
    );
}

نشر تطبيق Next.js على الإنترنت

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

نشر التطبيق على Vercel

1- قم بتنفيذ الأمر التالي لتثبيت أداة Vercel CLI.

npm install -g vercel

2- قم بتنفيذ الأمر التالي و أنت بداخل مجلد المشروع حتى تسجل دخولك إلى Vercel.

vercel login

3- قم بتنفيذ الأمر التالي لنشر التطبيق على Vercel.

vercel

نشر التطبيق على سيرفر VPS

1- قم بتنفيذ الأمر التالي لبناء نسخة من التطبيق يمكن تشغيلها على سيرفر.

npm run build

2- قم برفع النسخة التي تم إنشاءها إلى السيرفر و الذي يفترض أن تكون هيئته مسبقاً و ثبّت عليه Node.js.

3- على السيرفر الذي رفعت عليه النسخة، قم بتنفيذ الأمر التالي لكي تشغل التطبيق.

npm start

ما الخطوة التالية؟

في هذا الدليل، تعلمنا كل شيء عن Node.js، بدءاً من التثبيت، مروراً بالتوجيه، التصيير جلب البيانات، تحسينSEO، و حتى نشر التطبيق.

• استكشاف Next.js Middleware
• التكامل مع GraphQL و Redux
• إنشاء تطبيقات متقدمة باستخدام NextAuth.js