필요성

Next.js는 /user/:id와 같이 동적 주소를 처리하지 못하기 때문에, 동적 주소를 처리하기 위해서는 Next.js와 express를 연결할 필요가 있다.

연결 예제

backend 서버에서 했던 것 처럼 front에도 관련 모듈을 설치한 후 express로 서버를 만든다.
개발 환경에서 사용 할 nodemon도 연결해준다.

MacBookPro front % npm i express morgan cookie-parser express-session dotenv
MacBookPro front % npm i -D nodemon

백서버와 다른 점은
front/server.js에 next모듈을 추가하여 다음과 같이 설정해줘야 한다

const next = require('next');
const app = next({ dev }); // next 모듈을 사용
const handle = app.getRequestHandler();
app.prepare().then(() => {
...
    }),

front/server.js

const express = require('express');
const next = require('next');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const expressSession = require('express-session');
const dotenv = require('dotenv');

const dev = process.env.NODE_ENV !== 'production';
const prod = process.env.NODE_ENV === 'production';

dotenv.config();

const app = next({ dev }); // next 모듈을 사용
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express(); // back 서버에서의 const app = express()

  server.use(morgan('dev'));
  server.use(express.json());
  server.use(express.urlencoded({ extended: true }));
  server.use(cookieParser(process.env.COOKIE_SECRET));
  server.use(
    expressSession({
      resave: false,
      saveUninitialized: false,
      secret: process.env.COOKIE_SECRET, // backend 서버와 같은 키를 써야한다.
      cookie: {
        httpOnly: true,
        secure: false,
      },
    }),
  );
  
  server.get('/hashtag/:tag', (req, res) => {
    return app.render(req, res, '/hashtag', { tag: req.params.tag });
  });

  server.get('/user/:id', (req, res) => {
    return app.render(req, res, '/user', { id: req.params.id });
  });

  server.get('*', (req, res) => { // 모든 get 요청 처리
    return handle(req, res); // next의 get 요청 처리기
  });

  server.listen(3060, () => {
    console.log('next+expresss running on port 3060');
  });
});

front/nodemon.json

{
  "watch": ["server.js", "nodemon.json"],
  "exec": "node server.js",
  "ext": "js json jsx"
}

서버 실행 명령어도 nodemon으로 변경하여 준다.

front/package.json

{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon",
    "build": "next build",
    "start": "next start"
  },
    
  ...