next.js에서 dynamic route 설정하기

next-routes와 express를 이용해서 처리했다.

필요 모듈 설치

npm install --save next-routes express
or
yarn add next-routes express

routes.js 작성

라우팅 설정을 하는 routes.js 코드를 작성한다.

url 내에 dynamic route로 들어가는 부분은 express와 마찬가지로 :paramNames 로 표현한다.

const routes = module.exports = require('next-routes')();
routes
.add(‘index’, ’/’)
.add(‘posts’, ‘/posts’)
.add(‘postDetail’, ‘/posts/:postId’);

server.js 작성

express를 통해 next를 실행하는 server.js 코드를 작성한다.

const next = require('next');
const routes = require('./routes');
const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handler = routes.getRequestHandler(app);
const express = require('express');
async function start(port = 3000) {
try {
await app.prepare();
express().use(handler).listen(3000);
console.log(`server on. port: ${port}`);
} catch (e) {
console.error(e);
}
}
start();

컴포넌트 교체

next.js에서 제공하는 <Link/> 컴포넌트 대신 next-routes를 이용해 routes.js에서 만들어주는 Link를 쓴다. 대략 아래와 같은 모양.

// import
import { Link } from 'routes.js path';
// use
<Link route=“route 이름” params={params}>
링크
</Link>
// routes.js에서 post에 Link를 걸 경우
<Link route=“post” params={{ postId: 1 }}>
<a>POST 1</a>
</Link>