Next.js - 동적 주소 생성: Next.js와 express 연결하기

BigbrotherShin·2020년 3월 24일
5

Frontend

목록 보기
13/31
post-thumbnail

필요성

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

연결 예제

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

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

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

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"
  },
    
  ...
profile
JavaScript, Node.js 그리고 React를 배우는

1개의 댓글

comment-user-thumbnail
2020년 9월 7일

nextjs 문서를 보면 /user/:id 와 같은 동적 주소는 pages/user/[id].js 와 같이 컴포넌트 파일 생성하면 처리할 수 있을 것 같습니다.
https://nextjs.org/docs/routing/dynamic-routes
In Next.js you can add brackets to a page ([param]) to create a dynamic route (a.k.a. url slugs, pretty urls, and others).
저는 미들웨어 때문에 express 따로 띄울려고 했는데 express 사용 안해도 미들웨어는 등록할 수 있는 것 같고 오히려 nextjs 에서 제공해 주는 최적화 옵션을 버리게 되니 잘 생각해 보라고 되어 있더라구요.
찾아본 바로는 동적 라우팅이나 미들웨어를 위해서는 굳이 node 서버를 따로 작성할 필요는 없을 것 같습니다.

답글 달기