يشبه Next.js المطبخ السحري الذي يساعدك على إنشاء مواقع ويب رائعة. لكن في بعض الأحيان، قد ترغب في إضافة المكونات السرية الخاصة بك أو تغيير طريقة عمل المطبخ. اليوم، سوف نتعلم كيفية القيام بذلك! سنستكشف ثلاث طرق لتخصيص مطبخ Next.js الخاص بك:

إنشاء كتاب الوصفات الخاص بك (تكوينات حزمة الويب المخصصة)
استخدام تقنيات الطبخ الخاصة (تكوينات بابل المتقدمة)
قم ببناء مطبخك الخاص من الصفر (خادم Next.js المخصص)

1. إنشاء كتاب الوصفات الخاص بك (تكوينات Webpack المخصصة) تخيل أن لديك كتاب وصفات (حزمة ويب) يخبرك بكيفية خبز كعكة (قم ببناء موقع الويب الخاص بك). في بعض الأحيان، قد ترغب في إضافة لمسة خاصة بك إلى الوصفة. في Next.js، يمكنك القيام بذلك عن طريق إنشاء ملف خاص يسمى next.config.js.

مثال:
لنفترض أنك تريد إضافة الرشات إلى كعكتك، لكن الوصفة لا تتضمنها. يمكنك كتابة ملاحظة في كتاب الوصفات الخاص بك لإضافة الرشات دائمًا. في Next.js، قد يبدو الأمر كما يلي:

// next.config.js
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add your special ingredient (plugin) here
    config.plugins.push(new SprinklesPlugin())
    return config
  },
}

1. استخدام تقنيات الطبخ الخاصة (تكوينات بابل المتقدمة)

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

تخيل أن لديك فرنًا فائقًا (بابل) يمكنه تحويل كعكتك العادية إلى كعكة قوس قزح. يمكنك أن تطلب من الفرن الخاص بك القيام بذلك عن طريق كتابة تعليمات خاصة. في Next.js، يمكنك القيام بذلك في ملف يسمى .babelrc:

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    ["transform-rainbow-cake", { "layers": 7 }]
  ]
}

الآن، عندما تخبز كعكتك، سيحولها الفرن تلقائيًا إلى كعكة قوس قزح جميلة مكونة من 7 طبقات!

1. إنشاء مطبخك الخاص من الصفر (خادم Next.js المخصص) في بعض الأحيان، قد ترغب في السيطرة الكاملة على مطبخك. في Next.js، هذا يعني إنشاء خادم خاص بك بدلاً من استخدام الخادم المدمج.

مثال:
تخيل أنك تريد بناء مطبخك الفائق الذي يمكنه صنع الكعك وتقديم الآيس كريم أيضًا. يمكنك القيام بذلك عن طريق إنشاء غرفتك الخاصة (ملف الخادم) حيث يمكنك إعداد كل شيء بالطريقة التي تريدها.
إليك كيفية بناء مطبخك الخاص باستخدام Express:

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  // Your special ice cream machine
  server.get('/ice-cream', (req, res) => {
    res.json({ flavor: 'vanilla', toppings: ['sprinkles', 'chocolate sauce'] })
  })

  // Let Next.js handle everything else
  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

الآن لديك مطبخ رائع يمكنه صنع كعك Next.js وتقديم الآيس كريم أيضًا!
تذكر أن تخصيص مطبخ Next.js الخاص بك يمكن أن يكون أمرًا ممتعًا حقًا، ولكن من الجيد أيضًا استخدامه كما هو. الميزات المضمنة مذهلة بالفعل! قم بإضافة التقلبات الخاصة بك فقط عندما تحتاج إليها حقًا.
طهي سعيد مع Next.js!