自ブログをPages RouterからApp Routerに変更した

• 自ブログをPages RouterからApp Routerに変更してみました
  • CMSはNewtですが特にCMS依存な点はない
• 参考記事はこのへん
  • Data Fetching: Fetching | Next.js
  • Next.js を Pages Router から App Router に移行するときにやったこと
  • pages routerをapp routerへ移行していく
  • Next.js 13 app directory で記事投稿サイトを作ってみよう
• 対象リポジトリはこれ
  • GitHub - thetalemon/manasdiary
• サイトはこれ
  • manas diary

やったこと

• Next.jsを13.1 -> 13.4にアプデ
• Next.js を Pages Router から App Router に移行するときにやったこと を参考に _app.ts と Layout を layout.tsx とcomponents/layouts/defaultLayout.tsxに分割
  • 本当はlayout.tsxにまとめた方が良いと思うのだが、header/footerが上手く動かなかったのでとりあえずheader/footerはdefaultLayout.tsxに残した
• srcのsrc/api以外をappディレクトリに移動
  • src/pages/articles/[slug].tsxなどをapp/articles/[slug]/page.tsxのように変更
  • metadataは下記を参考に設定
    • App RouterのOGP設定方法まとめ [Next.js]
  • getStaticPropsやgetServerSidePropsは中身を取り出してPageコンポーネント内で呼び出すように変更
  • getStaticPathsはgenerateStaticParamsにしてpathsだけ渡すように変更
  • src/apiはそのまま（OGP生成APIのみ）
• storybookはsrc配下だけ認識するようになってたので、app配下を認識するように変更

悩みポイント：RSS feedどうするか

• 今までRSSフィードをPageがnullなgetServerSidePropsでやっていた（参考：Next.jsで動的にRSSフィードを生成する）
  • App RouterはgetServerSidePropsがなくなってしまい、PageでGETする必要がでてきてしまったので、Pageがnullなものを作るのが難しい
• ブログサイトを Next.js App Router に移行したので学びを書く | stin's blogの、Githubをチラ見して、同じように実装した
  • feed.tsxをapi/feed.tsに移動し、APIっぽく書き換え
  • API化し、next.config.jsのrewritesでapi/feedを/feedにRewriteにした

おわり

• 主な書き換え点はgetStaticProps, getServerSideProps, Headタグくらいなので、興味ある人は移行してみてもいいかも、くらいの移行難度。
  • 前にブログからmicroCMSへの移行を試す記事でも1度試したがGETがPageコンポーネントに近くなったのはしっくり感が高くて好き
• favicon等も『置くだけ』で設定できるのはlessで良い
  • 上書きも容易なのが体験として本当良い
• layout.tsxが上手く動かなかったのは追加調査したい、layout.tsxに設定したデフォルトOGPも上手く効いてない気がする。
• おわり。元のサイトの構成がシンプルなのもあってあまり沼らなかった。めでたし。