Next.jsのDynamic RoutesでSPA遷移

Issue

Next.jsのDynamic Routesを使っているページに対して普通にnext/linkの<Link>を使ってリンクを貼ると、遷移時にブラウザのロードが発生してしまってSPA遷移にならない。
最初、Next.jsじゃなくてReactの何かがおかしい？と思って軽くハマった。

import Link from 'next/link'

// これだとブラウザロードが発生してしまう
<Link href={`/posts/${post.id}`}>リンク</Link>

Solution

ドキュメントを見ると、next/linkの<Link>にはas属性というのが用意されており、「ブラウザのURLバーでレンダリングされるパスを示すもので、Dynamic Routesで使ってください」と書いてある。
じゃあhrefは何なのかと言うと、「pagesディレクトリの内部のパスです」とのこと。

要するに、例えばDynamic Routesでpages/posts/[post-id].jsxとしている場合は下記のように書けば良いらしいです。

import Link from 'next/link'

<Link href="/posts/[post-id]" as={`/posts/${post.id}`}>リンク</Link>

asの方に普段hrefに書いているような具体的なパスを書くんですね。何か違和感。。。