Next.js é como uma cozinha mágica que ajuda você a criar sites incríveis. Mas às vezes você pode querer adicionar seus próprios ingredientes secretos ou mudar o funcionamento da cozinha. Hoje vamos aprender como fazer exatamente isso! Exploraremos três maneiras de personalizar sua cozinha Next.js:

Criando seu próprio livro de receitas (configurações personalizadas de webpack)
Usando técnicas especiais de culinária (configurações avançadas do Babel)
Construindo sua própria cozinha do zero (servidor Next.js personalizado)

1. Criando seu próprio livro de receitas (configurações personalizadas do Webpack) Imagine que você tem um livro de receitas (webpack) que ensina como fazer um bolo (construa seu site). Às vezes, você pode querer adicionar seu próprio toque à receita. No Next.js, você pode fazer isso criando um arquivo especial chamado next.config.js.

Exemplo:
Digamos que você queira adicionar granulados ao seu bolo, mas a receita não os inclui. Você pode escrever uma nota em seu livro de receitas para sempre adicionar granulado. Em Next.js, pode ser assim:

// 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. Usando técnicas especiais de culinária (configurações avançadas do Babel)

Às vezes, você pode querer usar técnicas especiais de cozimento para deixar seu bolo ainda melhor. No mundo Next.js, usamos algo chamado Babel para fazer isso. Babel é como um forno mágico que pode transformar seus ingredientes de maneiras especiais.

Imagine que você tem um superforno (Babel) que pode transformar seu bolo normal em um bolo arco-íris. Você pode dizer ao seu forno para fazer isso escrevendo instruções especiais. No Next.js, você pode fazer isso em um arquivo chamado .babelrc:

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

Agora, quando você assar seu bolo, o forno irá transformá-lo automaticamente em um lindo bolo arco-íris com 7 camadas!

1. Construindo sua própria cozinha do zero (servidor Next.js personalizado) Às vezes, você pode querer ter controle total sobre sua cozinha. No Next.js, isso significa criar seu próprio servidor em vez de usar aquele que vem integrado.

Exemplo:
Imagine que você queira construir sua própria super cozinha que possa fazer bolos e também servir sorvetes. Você pode fazer isso criando sua própria sala especial (arquivo do servidor) onde você configura tudo do jeito que deseja.
Veja como você pode construir sua própria cozinha usando o 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')
  })
})

Agora você tem uma super cozinha que pode fazer bolos Next.js e servir sorvete também!
Lembre-se de que personalizar sua cozinha Next.js pode ser muito divertido, mas também não há problema em usá-la da maneira que for necessária. Os recursos integrados já são incríveis! Adicione seus próprios toques apenas quando realmente precisar deles.
Boa culinária com Next.js!