استخدام خادم مخصص في Next.js

تستخدم Next.js خادمها الافتراضي عند تنفيذ الأمر next start، لكن إن كانت لديك واجهة خلفية جاهزة ستتمكن من استخدامها في Next.js. يتيح لك خادم Next.js المخصص أن تشغّل خادمًا بطريقة برمجية تمامًا كي تستخدم أية نماذج من الخوادم المخصصة. قد لا تحتاج إلى ذلك في أغلب الأوقات، لكن الأمر متاح للتخصيص في Next.js.

تنويه: لا يمكن نشر تطبيقات بخوادم مخصصة على Vercel.

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

الق نظرة على الخادم المخصص التالي:

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
//هنا عند استخدامهما `hostname` و `port` يجب الإشارة إلى البرمجيتين الوسطيتين 
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      //`url.parse` كوسيط ثان للتابع `true` تأكد من تمرير القيمة 
      // URL فهذا ما سيخبره بضرورة تحليل جزء الاستعلام من عنوان
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})

تنبيه: لا يُمرر للملف server.js إلى babel أو webpack، لذا تأكد أن صياغة هذا الملف والمصادر التي يحتاجها متوافقة مع النسخة الحالية التي تشغلها من Node. لتشغيل الخادم المخصص، عليك تحديث الحقل scripts في الملف package.json كالتالي:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

يحتاج الخادم المخصص إلى الحزمة التالية ليصل الخادم مع تطبيق Next.js:

const next = require('next')
const app = next({})

تُمثِّل next دالة تقبل كائنًا بالخيارات التالية:

dev: يأخذ قيمة منطقية Boolean، ويحدد إن كنت ستشغل Next.js في نمط التطوير أو لا، وقيمته الافتراضية false.
dir: يأخذ قيمة نصية string، ويحدد موقع مشروع Next.js، وقيمته الافتراضية '.'.
quiet: يأخذ قيمة منطقية Boolean، يخفي رسائل الخطأ التي تحوي معلومات عن الخادم، وقيمته الافتراضية false.
conf: من النوع كائن object، وهو نفسه الكائن الذي قد تستخدمه في next.config.js، وقيمته الافتراضية {}.

يمكن استخدام المكوّن المُعاد كي يتيح معالجة الطلبات كما هو مطلوب من خلال Next.js.

تعطيل التوجيه القائم على نظام الملفات

تُخدّم Next افتراضيًا كل ملف موجود في المجلد pages تحت اسم مسار يطابق اسم الملف. لكن إن استخدم تطبيقك خادمًا مخصصًا، فقد ينتج عن ذلك تخديم نفس المحتوى وفق مسارت عدة، ويسبب مشاكل في تحسين محركات البحث SEO ومشاكل في تجربة المستخدم UX.

لإيقاف هذا السلوك ومنع التوجيه اعتمادًا على ملفات المجلد pages، افتح الملف next.config.js وعطّل الإعداد useFileSystemPublicRoutes.

module.exports = {
  useFileSystemPublicRoutes: false,
}

ملاحظة: يعطّل الخيار useFileSystemPublicRoutes التوجه بناء على اسم الملف من طرف الخادم SSR، وقد يبقى نظام التوجيه هذا متاحًا من طرف العميل. فعند استخدام هذا الخيار، لا بد من الانتباه عند الانتقال برمجيًا إلى وجهات لا تريدها.

ملاحظة: قد ترغب في إعداد موّجهٍ من جانب العميل client-side router يمنع إعادة التوجيه إلى وجهات تعتمد على اسم الملف، لهذا راجع توثيق الواجهة البرمجية للموّجه في Next.js.

أمثلة

المصادر

الصفحة Custom Server من توثيق Next.js الرسمي.