Next.js 9公開! Dynamic Routingができるようになった！

Next.js 9 がリリース！

Next.js 8 がリリースされてから半年しか立っていませんが、なんとNext.js 9がもうリリースされました！

Next.js 公式ブログよりリリースされた内容をまとめると

• TypeScript を設定なしで自動で build をすることができるようになった
• custom server を使わず Dynamic Routing できるようになった
• ページごとに SSR か静的配信かを選択できるようになった
• API Routing ができるようになった
• viewport の prefetch などアプリケーションの応答性がさらに上がった
• DX の改善

今回注目した内容

自分はまだ TypeScript をちゃんと触ったことがなかったため、今回は TypeScript ではなく Dynamic Routing に注目しました。

Next.js 8 までの Dynamic Routing

例えば/articles/1 のような URL で1の部分を id として扱いたい場合、Next.js8 以前までは custom server を自分で用意して Routing を実装しないといけませんでした。 (custom server のサポートも実際には 2016 年 12 月ごろからみたいです) 自分の場合は Dynamic Routing を簡単に定義してくれるライブラリnext-routesを使用して Routing を定義していましたが、それでも custom server を用意して Routing 実装をするのは Next.js を使ってる身としては普通に面倒だと感じていました。。以下がその例です。

routes.js

const routes = require('next-routes')

module.exports = routes().add('articles/detail', '/articles/:id')

server.js

// 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)
})

pages/articles/detail.js

static async getInitialProps({ query }) {
  // id = '1'
 const { id } = query

 await article = await axios.get(`articles/${id}`)
 return { article }
}

Next.js 9 からの Dynamic Routing

そこで Next.js 9 からは pages フォルダのファイル名で Dynamic Routing を実現できるようになりました。まさにほしかった機能！
実装方法はいたってシンプルで/articles/:id みたいな path でルーティングしたい場合には以下のように articles フォルダの配下に[id].jsというファイルを作成すれば実現できます。取得方法は Next.js 8 からと同じで query から取得できます。

/pages
  /articles
    [id].js

[id].js

static async getInitialProps({ query }) {
  // id = '1'
  const { id } = query

  const article = await axios.get(`articles/${id}`)
  return { article }
}

まとめ

next-routes からの移行も簡単にできそうなので今回の Dynamic Routing のサポートは非常にありがたいです。custom-server が必要なくなったという方も多く出てきそうな気がします。
Next.js がどんどん使いやすくなっていって使っている身としては嬉しいですね。