ブログをPages RouterからApp Routerへ移行する

今日はしばらく後回しにしていたこのブログのPages RouterからApp Routerに移行したときの手順をまとめていこうと思います。

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

1. appディレクトリを作成する

2. Root Layoutを作成する

app/layout.tsxがApp RouterのRoot Layoutになります。 root layoutはpages/_app.tsx, pages/_document.tsxを置き換えるものだそうです。 このとき、自分はChakra UIを使っていたので、ChakraProviderを使うためにapp/providers.tsxにもファイルを作成しました。(https://v2.chakra-ui.com/getting-started/nextjs-app-guide ) Chakra UIはを使っている限りサーバーコンポーネントを使うことができないので、UIライブラリを将来的に変更する必要がありそうです...

3. next/headの移行

今はまだmetadataを設定していないので、やりませんでした

4. ページに移行

ここからが本題になります。 スムーズな移行をするために、次の2つのステップで移行するのが良いそうです

• pagesのコンポーネントをClientコンポーネントとしてfeaturesディレクトリに移動
• Clientコンポーネントをappディレクトリのpage.tsxファイルに設置
• getStaticPathsをgenerateStaticParamsに移行
• getStaticPropsを使用せず、pageコンポーネントの中で取得するように変更

まとめ

これらのステップを踏んでappディレクトリに移行することができました。 今回はページがすごく少なかったのですぐに移行することができましたが、ページが多いと単純ではありますが時間が掛かりそうだなと主ました。 ただ、今はすべてuse clientを使っていて全くサーバーコンポーネントを使えていないので、これからサーバーコンポーネントを使うように少しずつ移行していきたいと思います。