로토의 블로그

next.js에서 dynamic route 설정하기

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>