web
Gatsby × Netlify から Next.js × Vercelに乗り換えました
公開日:2021年11月18日
更新日:2023年9月10日
Gatsbyに不満があったわけではないですが（むしろ今回の移行でGatsbyのありがたみも感じられた）、ほとんど動向を追えてないし、案件で使うとしたらNext.jsだろうなとか、Next.jsの方の盛り上がりを見ると、Next.jsに集中した方がいい気がしたので移行しました。NetlifyからVercelにしたのは惰性です。
Gatsbyの部分をNext.jsに変えただけで、既存のスタイルやコンポーネントはほとんどそのまま活かしました。ただ、Netlifyやめたせいで、Netlify Formが使えなくなり、お問い合わせフォームはなくなりました。個人なのでそんなに必要ないし問題ないです。
ざっくり手順
- Gatsby関連のライブラリをpackage.jsonから削除
- 関係ないとこでCreate Next Appして生成されたpackage.jsonやファイル構成を適用する
- Gatsby独自の書き方をNext.jsに置き換えていき、全画面で問題ないか確認
- NetlifyのGitHub連携を切る
- VercelとGitHubを連携し、デプロイする
- Vercelで独自ドメインの設定をし、ドメインの管理会社でネームサーバーの設定を変更する
- 完成
- 後片付け（Netlifyでプロジェクト削除など）
GatsbyではOKだったけど、Next.jsではNGだったこと
Linkタグ直下はタグひとつ
こういうのがダメみたいです
<Link href="/about">
<a>To About</a>
<a>Second To About</a>
</Link>
https://nextjs.org/docs/messages/link-multiple-children
Linkタグの中にaタグを書くときはpassHrefつける
GatsbyのLinkはスタイリングするときにLinkを直接emotionで上書きしてましたが、next/link はそれはできないので、Linkはそのままで直下にスタイリングしたaタグを置くのですが、その時の指定です。
https://nextjs.org/docs/messages/link-passhref
感想
Gatsbyのプラグインってありがたいなー。