web

Gatsby + Netlify から Next.js + Vercelに乗り換えました

公開日:2021年11月18日
最終更新日:2021年11月21日

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のプラグインってありがたいなー。

参考サイト

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記