Next.js es como una cocina mágica que te ayuda a crear sitios web increíbles. Pero a veces es posible que desees agregar tus propios ingredientes secretos o cambiar el funcionamiento de la cocina. ¡Hoy vamos a aprender cómo hacer precisamente eso! Exploraremos tres formas de personalizar su cocina Next.js:

Creando tu propio libro de recetas (configuraciones de paquete web personalizadas)
Usando técnicas de cocina especiales (configuraciones avanzadas de Babel)
Construyendo tu propia cocina desde cero (servidor Next.js personalizado)

1. Creación de su propio libro de recetas (configuraciones de paquete web personalizadas) Imagina que tienes un libro de recetas (paquete web) que te dice cómo hornear un pastel (crear tu sitio web). A veces, es posible que desees agregar tu propio toque a la receta. En Next.js, puede hacer esto creando un archivo especial llamado next.config.js.

Ejemplo:
Digamos que quieres agregar chispas a tu pastel, pero la receta no las incluye. Puedes escribir una nota en tu libro de recetas para agregar siempre chispas. En Next.js, podría verse así:

// 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. Uso de técnicas de cocción especiales (Configuraciones avanzadas de Babel)

A veces, es posible que desees utilizar técnicas de cocina especiales para hacer que tu pastel sea aún mejor. En el mundo de Next.js, usamos algo llamado Babel para hacer esto. Babel es como un horno mágico que puede transformar tus ingredientes de maneras especiales.

Imagina que tienes un súper horno (Babel) que puede convertir tu pastel habitual en un pastel de arcoíris. Puede indicarle a su horno que haga esto escribiendo instrucciones especiales. En Next.js, puedes hacer esto en un archivo llamado .babelrc:

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

¡Ahora, cuando hornees tu pastel, el horno lo convertirá automáticamente en un hermoso pastel arcoíris con 7 capas!

1. Construyendo su propia cocina desde cero (servidor Next.js personalizado) A veces, es posible que desees tener un control total sobre tu cocina. En Next.js, esto significa crear su propio servidor en lugar de usar el que viene integrado.

Ejemplo:
Imagina que quieres construir tu propia súper cocina que pueda hacer pasteles y también servir helado. Puedes hacer esto creando tu propia sala especial (archivo de servidor) donde configuras todo tal como lo deseas.
Así es como puedes construir tu propia cocina usando 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')
  })
})

¡Ahora tienes una súper cocina que puede hacer pasteles Next.js y servir helado también!
Recuerde, personalizar su cocina Next.js puede ser muy divertido, pero también está bien usarlo tal como viene. ¡Las funciones integradas ya son bastante sorprendentes! Añade tus propios giros solo cuando realmente los necesites.
¡Feliz cocinando con Next.js!