mismith

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が使えなくなり、お問い合わせフォームはなくなりました。個人なのでそんなに必要ないし問題ないです。

ざっくり手順

  1. Gatsby関連のライブラリをpackage.jsonから削除
  2. 関係ないとこでCreate Next Appして生成されたpackage.jsonやファイル構成を適用する
  3. Gatsby独自の書き方をNext.jsに置き換えていき、全画面で問題ないか確認
  4. NetlifyのGitHub連携を切る
  5. VercelとGitHubを連携し、デプロイする
  6. Vercelで独自ドメインの設定をし、ドメインの管理会社でネームサーバーの設定を変更する
  7. 完成
  8. 後片付け(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のプラグインってありがたいなー。

参考サイト

Category

  • 写真
  • web
  • 雑記