express로 Next 커스텀 프론트 서버 구축하기

 

Advanced Features: Custom Server | Next.js

 

npm run build && start 외에 좀 더 커스터마이징을 하고 싶다면 커스텀 서버를 만들어야 한다.

 

Node이기만 하면 되므로 node를 이용하는 프레임워크를 사용하기만 하면 된다. 

공식 문서에서도 바닐라 노드, express, hapi, koa 등을 사용하는 예제들을 보여준다.

 

• Basic custom server
• Express integration
• Hapi integration
• Koa integration
• SSR Caching

 

응? 그러니까, 보통 리액트에서는 build한 다음 build된 index.html을 express가 정적 파일을 렌더하는 방식으로 같이 돌렸다. 이것은 리액트(front)와 express(back)이 분리된 형태이다.

 

그러나 Next에서는 백엔드 서버와 별도로 프론트 서버가 따로 돌아갑니다. 

따라서 배포시에 프론스 서버에도 pm2를 돌리고 백엔드에도 pm2를 돌립니다.

 

 

front/server.js

 

보시면. app.prepare 내부에 일반 express를 돌리듯 그냥 돌리면 됩니다.

동적 라우팅을 사용하면 일부 코드를 생략할 수 있습니다.

const express = require("express");
const next = require("next");
const morgan = require("morgan");

const dev = process.env.NODE_ENV === "development";

const app = next({ dev });

const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // 미들웨어
  server.use(morgan("dev"));
  server.use(express.json());
  server.use(express.urlencoded({ extended: true }));
  
  // 페이지 렌더. 이 부분은 Next 9 이후 부터 제공된 '동적 라우팅'으로 대체할 수 있습니다.
  // 즉, 안해도 된다는 겁니다.
  server.get('/user/:id', (req, res) => {
  
    // /user/:id로 접근하면 /user를 렌더하되 id 파라미터를 전달합니다.
    return app.render(req, res, '/user', { id: req.params.id });
  });

  // 그 외 라우팅 처리
  server.get('*', (req, res) => {
    return handle(req, res);
  });

  // 프론트 서버 가동
  server.listen(3000, () => console.log(`next+express front on : localhost:3000`));
});

 

script는 next dev가 아니라 이제 node로 서버를 돌리는 방식으로 이뤄진다.

"scripts": {
  "dev": "nodemon --exec node server.js",
  "build": "next build",
  "start": "next start"
},

 

배포시에는 프론트 측에서 pm2로 돌리면 된다. 일반 express 백엔드 구성할 때와 똑같다.