next-routesexpress를 이용해서 처리했다.

필요 모듈 설치

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>