フリーランチなど無い - There ain't no such thing as a free lunch

Amplify&Next.jsでnext/linkを使ったときに `incompatible with the href value` エラーが出る

The provided `as` value (/foo/1) is incompatible with the `href` value (/foo/[id]/bar).

上記のようなエラーが出るときがある。 結論から言うと、これはRewrites and Redirectsの設定漏れによるもの。

SSGで生成したコンテンツにDynamic Routingを行う場合配信サーバ(Amplifyの場合Cloudfront)で書き換えの設定を行う必要がある。

このとき、/foo/<*> => /foo/[id].html のように設定してしまうと、/foo/[id]/bar/foo/[id] にリダイレクトしてしまう。 /foo/<id> => /foo/[id].html/foo/<id>/bar => /foo/<id>/bar.html のようにプレースホルダーを使えば良い。

わりと忘れがちなので書き残しておく。