Next.js: getStaticPaths and Hybrid AMP don't seem to get along

too long to read

In Next.js under hybrid amp, getStaticPaths and getStaticProps (dynamic route) donot work well because of some problem around params query(maybe).

Introduction

Environment

react: 16.13.1
Next.js: v9.5.5

introduction

related issues of next.js in github

• Incremental Static Regeneration replaces .amp with ?amp=1 #14251
• SSG with fallback doesn't generate AMP page dynamically #14256

Main

Behavior

hybrid amp と getStaticPaths / getStaticProps を併用すると、手元の dev や build では動いてるように見えるが、実際に vercel等に上げてみると下の様にエラーを起こす。エラー文を見る限り、json の中の null が原因の様だが、実際には　hybrid amp 時の　params の変化によるものの様だ。

tags/[tag] は動的ルートのページを静的生成し、 例えば {params: {tag: 'hello'}} だと tags/hello/ となる。そして、hybrid amp の際は {params: {tag: 'hello', amp: 1}} として、tags/hello?amp=1 となる事になっている。この url の変化により、getStaticPaths 等がエラーを起こす様だ。なお、amp: true は出力するのが amp ページのみなので、url は変わらず、エラーも起きない。

solution

• hybrid 下での getStaticPaths 等を止める
• hybrid を止め、amp: true とする。

conclusion

元々AMPに技術に完全に乗っかるのは？と思いつつも、amp hybrid を進めてきましたが、自分がしたかったものは現状できない様なので https://oriverk.dev は AMP を採用しないことにした。AMP はその他の playground や趣味ブログに適用予定。