دليل Next.js الشامل: من العرض من جانب الخادم إلى واجهات برمجة تطبيقات REST والمواقع الثابتة

يُعد Next.js إطار عمل JavaScript قويًا ومفتوح المصدر، مبنيًا على مكتبة React.js، يهدف إلى تبسيط عملية بناء تطبيقات الويب المعقدة. يوفر هذا الإطار مجموعة واسعة من الميزات والأدوات التي تجعل عملية تطوير التطبيقات الكاملة أكثر سلاسة وفعالية. يتميز Next.js بتجربة مطور ممتازة، وقد بسّط العديد من الميزات التي كانت معقدة في السابق، مثل العرض من جانب الخادم (Server-side Rendering)، وإنشاء المواقع الثابتة (Static Site Generation)، والتعامل مع واجهات برمجة تطبيقات REST.

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

إعداد وتكوين Next.js: البداية السهلة لمشروعك

يتيح لك Next.js تشغيل وبناء تطبيق ويب كامل دون الحاجة إلى أي تهيئة معقدة. إنه سهل الاستخدام للغاية؛ يمكنك ببساطة تهيئة تطبيق Next.js كامل بأمر واحد فقط.

تشغيل تطبيق Next.js بأمر واحد

للبدء، استخدم الأمر التالي لإنشاء تطبيق Next.js جديد:

yarn create next-app

بعد اكتمال عملية الإنشاء، يمكنك تشغيل التطبيق باستخدام الأمر yarn dev وسيكون تطبيقك جاهزًا للعمل على الفور!

إضافة تهيئة مخصصة لتطبيق Next.js

يوفر Next.js مرونة كبيرة للسماح لك بإضافة تهيئة مخصصة لـ webpack، كما يمكنك دمج وإضافة الإضافات (plugins). قد تحتاج أحيانًا إلى إضافة إضافة لمعالجة الصور، أو لدعم حزمة غير مدعومة من Next.js افتراضيًا، مثل معالجة ملفات CSS. للقيام بذلك، يمكنك إنشاء ملف next.config.js في الدليل الجذر لتطبيقك. يوضح المثال أدناه كيفية إضافة إضافة لتحميل ملفات البيئة (environment files) باستخدام dotenv:

require("dotenv").config();
const webpack = require("webpack");

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new webpack.EnvironmentPlugin(process.env)
    );
    return config;
  },
};

دمج أدواتك المفضلة: TypeScript، Firebase، والمزيد

من السهل دمج أدوات مثل TypeScript و Firebase أو AWS مع Next.js. كما يقدم Next.js العديد من القوالب الجاهزة (boilerplates) لكل حالة استخدام في مستودعه على GitHub، والتي يمكنك استكشافها لاختيار الأنسب لاحتياجاتك.

إضافة Firebase إلى Next.js

على سبيل المثال، إذا كنت ترغب في إضافة Firebase جاهزًا للاستخدام، يمكنك تشغيل الأمر التالي:

yarn create next-app --example with-firebase with-firebase-app

سيؤدي هذا إلى تهيئة تطبيق Next.js مع Firebase مُكوّن مسبقًا، وتثبيت الحزم اللازمة لتشغيل Firebase.

دعم TypeScript في Next.js

أمر واحد يكفي لإضافة دعم TypeScript إلى Next.js:

touch tsconfig.json

سيؤدي هذا إلى إنشاء ملف tsconfig.json لمترجم TypeScript. سيكتشف Next.js الملف تلقائيًا ويقوم بإنشاء تهيئة TypeScript افتراضية لك. يمكنك إضافة تهيئتك المخصصة لاحقًا، فقط تأكد من إضافة امتداد .ts لمكوناتك حتى يتمكن المترجم من تفسير ملفاتك كملفات TypeScript.

العرض من جانب الخادم (SSR): تعزيز SEO وأداء التطبيق

يساعد العرض من جانب الخادم (Server-side Rendering - SSR) في تحسين محركات البحث (SEO) لموقعك. لذا، إذا كان تحسين ظهور موقعك في نتائج البحث من أولوياتك، فإن Next.js يُعد خيارًا ممتازًا لك. يمنحك Next.js خيارات أفضل لكيفية عرض تطبيقك. على سبيل المثال، يمكنك تمكين أو تعطيل العرض من جانب الخادم لكل صفحة على حدة. إذا استخدمت الدالة getServerSideProps، فستجعل الصفحة تُعرض من جانب الخادم افتراضيًا، وتمنحك الوصول إلى الخصائص (props) التي يتم جلبها من جانب الخادم.

المواقع والمكونات الثابتة: نشر سهل وفعال

يمكنك تصدير تطبيقك كـ موقع ثابت (static site) واستضافته على أداة استضافة ويب ثابتة مثل Netlify. سيقوم الأمر next export بإنشاء مكون ثابت لك. لبناء وتصدير التطبيق كـ HTML ثابت، قم بتشغيل الأمر التالي:

next build && next export

للاطلاع على المزيد من الخيارات عند التصدير كـ HTML، يمكنك مراجعة وثائق Next.js الرسمية.

نظام التوجيه (Routing) في Next.js: مرونة وكفاءة

يأتي نظام التوجيه (Routing) مدمجًا مع Next.js، مما يعني أنك لست بحاجة إلى استخدام أي مكتبة خارجية للتعامل معه. كما يأتي بنهجين مختلفين: التوجيه الديناميكي (dynamic routing) والمسارات المحددة مسبقًا (imperial/pre-defined routes).

التوجيه الديناميكي (Dynamic Routing)

يتيح لك التوجيه الديناميكي إنشاء عناوين URL ومسارات ديناميكية. تخيل أن لديك مدونة وتريد عرض تفاصيل كل منشور. بدلاً من إنشاء صفحات متعددة (محددة مسبقًا) لكل منشور، يمكنك استخدام صفحة ديناميكية قابلة لإعادة الاستخدام.

يمكن تنفيذ التوجيه الديناميكي بالطريقة التالية:

1. داخل مجلد pages، أنشئ مجلدًا سيتم استخدامه لعرض المسار الديناميكي. يمكننا تسميته page.
2. لجعله ديناميكيًا، يمكننا ببساطة إضافة شرطة مائلة (/) ومعامل (param)، مثل: page/[pid]. يجب أن يكون المعامل داخل قوسين مربعين.
3. ثم نقوم بإنشاء ملف index.js داخل مجلد page/[pid]. يحتوي هذا الملف على الكود التالي:

import React from 'react'
import {useRouter, Router} from 'next/router'
import {route} from 'next/dist/next-server/server/router'

export default function pid () {
  const router = useRouter()
  const {pid} = router.query
  return <div> Page id :{pid} </div>
}

مثال على مسار ديناميكي هو http://localhost:3000/page/2. يمكننا أيضًا استخدام router.query للوصول إلى جميع المعاملات كما في المثال أعلاه.

بناء واجهات برمجة تطبيقات REST (REST APIs) داخل Next.js

بالإضافة إلى الميزات الأخرى، يمكنك بناء نقاط نهاية لواجهات برمجة تطبيقات REST (REST API endpoints) داخل تطبيق Next.js الخاص بك واستهلاكها داخل نفس التطبيق أو أي تطبيق آخر. يوضح المثال أدناه عرضًا توضيحيًا صغيرًا لنقطة نهاية بسيطة تُرجع قائمة من المنشورات.

إذا كنت تستخدم Next.js الإصدار 9.5.2 أو أعلى، فإنه يأتي مع مجلد api افتراضيًا، وعادة ما يكون داخل مجلد pages. إليك مثال على استخدام نقطة نهاية تُرجع استجابة JSON على المسار /api/posts:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
const posts = [
  { id: 1, name: 'Nextjs is awesome' },
  { id: 2, name: 'Using TypeScript with Nextjs' },
  { id: 3, name: 'GraphQL Vs REST' },
  { id: 4, name: 'Bridging in React Native' }
]

export default (req, res) => {
  res.statusCode = 200
  res.json(posts)
}

إذا قمت بزيارة http://localhost:3000/api/posts، فستُرجع استجابة JSON تحتوي على قائمة المنشورات.

ميزات إضافية في Next.js

وحدات CSS (CSS Modules)

يدعم Next.js وحدات CSS افتراضيًا. يمكنك إنشاء وحدة CSS مباشرةً باستخدام تسمية style.module.css واستيرادها داخل أي مكون على النحو التالي:

import styles from './style.module.css'

كتابة CSS داخل JavaScript (CSS in JS)

يمكنك أيضًا استخدام CSS in JS تمامًا كما تفعل في React:

<div style={{ width: 300 }}> Card </div>

أوصي بشدة بزيارة الموقع الرسمي لـ Next.js على nextjs.org لمعرفة المزيد عن الميزات الإضافية. يمكن العثور على الكود المصدري للأمثلة المستخدمة في هذا المقال على GitHub.

الخلاصة التقنية

يبرز Next.js كحل متكامل وفعال لتطوير تطبيقات الويب الحديثة، خاصة تلك التي تعتمد على React. بفضل ميزاته المتقدمة مثل العرض من جانب الخادم (SSR) وإنشاء المواقع الثابتة (SSG)، يوفر Next.js تحسينات جوهرية في أداء التطبيق وتجربة المستخدم، فضلاً عن تعزيز قدرة الموقع على الظهور في محركات البحث. كما أن دعمه المدمج للتوجيه وواجهات برمجة تطبيقات REST، بالإضافة إلى مرونة التكوين ودعم TypeScript، يجعله خيارًا ممتازًا للمطورين الذين يسعون لبناء تطبيقات قوية وقابلة للتوسع بكفاءة عالية. إنه يمثل قفزة نوعية في تبسيط تعقيدات تطوير الويب، مما يتيح للمطورين التركيز بشكل أكبر على بناء الميزات وتقديم قيمة حقيقية للمستخدمين.