로고

Next.js 커스텀 서버 설정하기: 고급 설정 방법

작성일 :

Next.js 커스텀 서버 설정하기: 고급 설정 방법

Next.js는 리액트 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등을 지원합니다. 종종 기본 서버 설정을 넘어서 좀 더 복잡하거나 맞춤형 로직을 추가하고 싶을 때가 있습니다. 이럴 때, Next.js의 커스텀 서버 기능을 활용하면 멋진 설정을 할 수 있습니다. 이번 글에서는 Next.js 프로젝트에서 커스텀 서버를 설정하는 방법과 고급 설정 방법을 자세히 살펴보겠습니다.

왜 커스텀 서버를 사용하는가?

기본 Next.js 서버는 대부분의 상황에서 충분히 강력하지만, 커스텀 서버를 통해 다음과 같은 기능을 더할 수 있습니다:

  1. API 라우팅 커스터마이징
  2. 사용자 인증 및 권한 부여 로직 추가
  3. 특정 요청이나 경로에 고유한 응답 로직 처리
  4. 프로그래밍적으로 리다이렉트 및 리라이트 규칙 설정
  5. 웹 소켓이나 다른 실시간 기능 통합

커스텀 서버 시작하기

1단계: Next.js 프로젝트 설정

기본적인 Next.js 프로젝트를 설정합니다. 다음 명령어를 통해 새 프로젝트를 생성하거나, 기존 프로젝트를 사용할 수도 있습니다.

bash
npx create-next-app my-custom-server
cd my-custom-server

2단계: 커스텀 서버 파일 생성

프로젝트 루트에 server.js 파일을 생성합니다. 이 파일이 커스텀 서버의 진입점이 됩니다. 우선 기본적인 Express 서버 설정을 작성해 보겠습니다.

javascript
// server.js
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();

  server.get('*', (req, res) => {
    return handle(req, res);
  });

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

3단계: package.json 스크립트 수정

package.json 파일을 열어 start 스크립트를 수정합니다. Next.js의 기본 서버 대신 커스텀 서버를 실행하도록 설정합니다:

json
// package.json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "node server.js"
  // 그 외 다른 스크립트들...
}

고급 설정

이제 기본 커스텀 서버 설정이 완료되었습니다. 이를 바탕으로 고급 기능을 추가해봅시다.

API 라우팅 커스터마이징

커스텀 서버를 통해 API 라우팅을 제어할 수 있습니다. 예를 들어, /api/custom 경로로 API 요청을 처리하고 싶다면 다음과 같이 설정할 수 있습니다:

javascript
// server.js
server.get('/api/custom', (req, res) => {
  res.json({ message: 'This is a custom API endpoint' });
});

사용자 인증 및 권한 부여

사용자 인증 및 권한 부여 로직도 커스텀 서버에 쉽게 추가할 수 있습니다. 예를 들어 JWT를 사용한 인증 로직을 추가할 수 있습니다:

javascript
// server.js
const jwt = require('jsonwebtoken');

server.use((req, res, next) => {
  const token = req.headers['authorization'];
  if (token) {
    jwt.verify(token, 'your_secret_key', (err, decoded) => {
      if (err) {
        return res.status(401).json({ message: 'Invalid token' });
      } else {
        req.user = decoded;
        next();
      }
    });
  } else {
    res.status(403).json({ message: 'No token provided' });
  }
});

리다이렉트 및 리라이트 규칙 설정

프로그래밍적으로 리다이렉트나 리라이트 규칙을 추가할 수 있습니다. 예를 들어, /old-route로의 접근을 /new-route로 리다이렉트하고 싶다면 다음과 같이 설정할 수 있습니다:

javascript
// server.js
server.get('/old-route', (req, res) => {
  res.redirect('/new-route');
});

결론

Next.js의 커스텀 서버 설정을 통해 기본 기능을 확장하고, 프로덕션 수준의 복잡한 웹 애플리케이션을 더욱 효과적으로 개발할 수 있습니다. 이 글에서는 기본 설정부터 고급 기능 추가까지 중요한 내용을 다뤘습니다. 이를 바탕으로 자신만의 커스텀 서버를 구성해 다양한 요구 사항을 만족시켜야 합니다. 즐거운 개발 되십시오!