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

تستخدم Next.js خادمها الافتراضي عند تنفيذ الأمر start next، لكن إن كانت لديك واجهة خلفية جاهزة ستتمكن من استخدامها في 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 التوجه بناء على اسم الملف من جانب الخادم، وقد يبقى نظام التوجه هذا متاحًا من ناحية العميل. فعند استخدام هذا الخيار، لا بد من الانتباه عند الانتقال برمجيًا إلى وجهات لا تريدها.

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

المصادر

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