Next.js — это волшебная кухня, которая помогает создавать потрясающие веб-сайты. Но иногда вам может потребоваться добавить свои секретные ингредиенты или изменить принцип работы кухни. Сегодня мы научимся это делать! Мы рассмотрим три способа настройки вашей кухни Next.js:

Создание собственной книги рецептов (индивидуальные конфигурации веб-пакета)
Использование специальных технологий приготовления (расширенные конфигурации Babel)
Создание собственной кухни с нуля (собственный сервер Next.js)

1. Создание собственной книги рецептов (пользовательские конфигурации веб-пакета) Представьте, что у вас есть книга рецептов (веб-пакет), в которой рассказывается, как испечь торт (создать свой веб-сайт). Иногда вы можете добавить в рецепт свою изюминку. В 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. Использование специальных методов приготовления пищи (расширенные конфигурации Babel)

Иногда вам может понадобиться использовать особые приемы приготовления, чтобы сделать торт еще лучше. В мире Next.js для этого мы используем нечто под названием Babel. Babel похож на волшебную печь, которая может особым образом преобразовывать ваши ингредиенты.

Представьте, что у вас есть супер-печь (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!