next export
でページの 静的HTMLエクスポート を行う(静的にプリレンダリングする)場合、 Next.js はページが AMP をサポートしているかどうかを検出し、それに応じて挙動を変更します。
例えば、ハイブリッドな AMP ページ pages/about.js
は次のようにエクスポートされます:
out/about.html
- クライアントサイドの React ランタイムを使用した HTML ページout/about.amp.html
- AMP ページまた、AMP-only のページ pages/about.js
の場合は:
out/about.html
- 最適化された AMP ページNext.js は、HTML ページに AMP ページへのリンクを自動的に挿入するので、以下を手動で記述する必要はありません:
<link rel="amphtml" href="/about.amp.html" />
そして、AMP ページに HTML ページへのリンクが挿入されます:
<link rel="canonical" href="/about" />
trailingSlash
を有効にすると、 pages/about.js
は以下のようにエクスポートされます:
out/about/index.html
- HTML ページout/about.amp/index.html
- AMP ページ