ブログをAstroに移行したので報告がてら簡単な手順を書いていきます。
なおソースコードはGithubにあげておきました。
https://github.com/matsunagadaiki151/astro-myblog

なぜ移行したか

移行したいと思ったきっかけはいくつかあります。
まず、Vercelの無料プランで広告が貼れないと言うことです。このため、いくつか代用案を考えましたが、Next.jsにおいて最適な場所がVercelであるとわかっていたため、なかなか移行ができていない状態でした。
それに加えて、Next.jsが巨大化しつつあり、ブログの改修をするにはオーバースペック気味だとイベント聞きました。
これらのことから、そもそもNext.jsではないより静的サイトに特化したフレームワークを使って別のホスティング先にデプロイしようと思いました。
そこで、現在静的サイトジェネレータの中で人気を増やしてきているAstroを入門し、これはいいなと思ったので移行することにしました。この際に、商用利用可能なCloudflare Pagesへ移行することも決めました。

どうやって移行したか

Next.jsからAstroへの移行に関しては基本的にAstro公式ドキュメントのMigrate to Astro(https://docs.astro.build/ja/guides/migrate-to-astro/)を見ながらやっていきました。Next.js以外にもGatsbyやNust.jsなど多くの移行元のサポートをしているのでとりあえずこれを見ておけばいいでしょう。一部、書いてない部分もあるので適宜他のドキュメントを見ておきましょう。(このあたりは今後このブログで書く予定です)
Cloudflare Pagesへのデプロイに関しては特に難しくなく、Githubへプロジェクトをプッシュした後、Pages側からそのリポジトリを選択するだけです。この時点でデプロイできるので必要に応じて独自の設定をするといいでしょう。私の場合は、以下の設定を行いました。

• 現ドメインとの紐付け
• 旧ドメインから現ドメインへのリダイレクト設定
• Analytics機能の有効化

ドメインに関しては、Route53で管理されていたので、CNAMEレコードを変更することで対応しました。
リダイレクトに関してはCloudflareの一括リダイレクト機能を使用しました。まだベータ版のため他の機能を使ったほうがいいかもしれません。
Analytics機能はボタンひとつ押すだけで有効にできるのでやっておくといいでしょう。

簡単ですが、今回の技術スタックを以下に記します。

技術スタック

• Astro
  • TypeScript
  • TailwindCSS
• Cloudflare Pages
• Route53

リプレイスなので大きく変えた部分はAstroの基本構文くらいになります。特にTailwindCSSはAstroで使えるよう設定したあと、コピペしただけで新しく実装した箇所は一個もありません。

変わったこと

特に変わっていません。強いて言うならAstroがMPAであることからページロードが発生しています。ただそれで動作が重くなったと言うことは少なくとも私の環境では発生していません。

所感

Next.jsからAstroへの移行は思ったよりシンプルに実装できたし、Cloudflareもデプロイ自体は簡単でした。
ただ、旧URLを現URLへ移行する設定で苦労しました。具体的には、誤ってソースを現ドメイン、ターゲットを旧ドメインに設定していた部分が、その設定を消しても反映され続ける状態になってしまいました。結局、この問題を解決するためにリダイレクトルールを全て削除して、再設定したら解決しました。やっぱり正式版が出るまでは思わぬ挙動をするんだなと思いました。

[2023/7/17追記]
レスポンシブ対応が正常にされてなかったため修正しました。
原因はviewportが設定されていないことでした。Next.jsではなくても動いたため、移行の際は忘れないよう気を付けましょう。

今回は以上になります。
上記のリダイレクト設定以外は意外と簡単に実装できたので皆さんもリプレイスしてみるといいのではないと思います。
これで簡単に改修ができるようにはなりましたが、それとは別にやりたいことができたので当分しないと思います。(もちろん記事は投稿します)