Next.js는 멋진 웹사이트를 만드는 데 도움이 되는 마법의 주방과 같습니다. 하지만 때로는 자신만의 비밀 재료를 추가하거나 주방 작동 방식을 바꾸고 싶을 수도 있습니다. 오늘은 그 방법을 배워보겠습니다! Next.js 주방을 사용자 정의하는 세 가지 방법을 살펴보겠습니다.

나만의 레시피 북 만들기(맞춤형 웹팩 구성)
특별한 요리 기술 사용(고급 바벨 구성)
처음부터 나만의 주방 만들기(맞춤형 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. 특별한 요리 기술 사용(고급 바벨 구성)

때로는 특별한 요리 기술을 사용하여 케이크를 더욱 맛있게 만들고 싶을 수도 있습니다. 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와 함께 즐거운 요리하세요!