そーす

I'm a programmer in Fukuoka. Please contact me saubre.app[at]gmail.com or Twitter DM.

Next.jsに動的ルーティングを追加する「next-routes」

Nextjsにはデフォルトでルーティング機能があります。

[root_directory]/pages/ディレクトリ構成がそのままルーティングになります。

しかし、RESTfulなURIにする場合はサーバーの設定をカスタマイズして手動でしなければなりません。

そのような動的なルーティングを追加するためのモジュールがnext-routesです。

github.com

動的なルーティングを追加

たとえば、/users/show?id=ryohlan/users/ryohlanというルーティングを貼りたい場合は

# routes.js
const routes = module.exports = require('next-routes')()

routes
.add('/users/:id', '/users/show')

このように定義して、

# 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 {createServer} = require('http')
app.prepare().then(() => {
  createServer(handler).listen(3000)
})

という風にサーバーの設定を変更することで

/users/ryohlanへのアクセスを/users/show?id=ryohlanで受けることができます。

クリックで遷移の時

Nextjsではクリック遷移の時はNextimport Link from 'next/link'でLinkコンポーネントを使うのですが、

next-routesにはLinkコンポーネントもあるので代用することで動的なルーティングを使うことができる

# routes.js
const routes = module.exports = require('next-routes')()

routes
.add('users_show', '/users/:id', '/users/show') # 第1引き数が/で始まらない場合はルーティングのIDとして使うことができる

# pages/users/show.js
import {Link} from '../routes'

export default () => (
  <div>
    <Link route='users_show' params={{id: 'ryohlan'}}>
      <a>Hello world</a>
    </Link>
  </div>
)