<p>Gatsbyに不満があったわけではないですが（むしろ今回の移行でGatsbyのありがたみも感じられた）、ほとんど動向を追えてないし、案件で使うとしたらNext.jsだろうなとか、Next.jsの方の盛り上がりを見ると、Next.jsに集中した方がいい気がしたので移行しました。NetlifyからVercelにしたのは惰性です。<br><br>Gatsbyの部分をNext.jsに変えただけで、既存のスタイルやコンポーネントはほとんどそのまま活かしました。ただ、Netlifyやめたせいで、Netlify Formが使えなくなり、お問い合わせフォームはなくなりました。個人なのでそんなに必要ないし問題ないです。<br></p><h2 id="h79f708eed5">ざっくり手順</h2><ol><li>Gatsby関連のライブラリをpackage.jsonから削除</li><li>関係ないとこでCreate Next Appして生成されたpackage.jsonやファイル構成を適用する</li><li>Gatsby独自の書き方をNext.jsに置き換えていき、全画面で問題ないか確認</li><li>NetlifyのGitHub連携を切る</li><li>VercelとGitHubを連携し、デプロイする</li><li>Vercelで独自ドメインの設定をし、ドメインの管理会社でネームサーバーの設定を変更する</li><li>完成</li><li>後片付け（Netlifyでプロジェクト削除など）</li></ol><p><br></p><h2 id="haba26375cd">GatsbyではOKだったけど、Next.jsではNGだったこと</h2><h3 id="h8853244ec8">Linkタグ直下はタグひとつ</h3><p>こういうのがダメみたいです</p><pre><code>&lt;Link href="/about"&gt;
  &lt;a&gt;To About&lt;/a&gt;
  &lt;a&gt;Second To About&lt;/a&gt;
&lt;/Link&gt;</code></pre><p><br><a href="https://nextjs.org/docs/messages/link-multiple-children" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/link-multiple-children</a><br></p><h3 id="h2be7de5add">Linkタグの中にaタグを書くときはpassHrefつける</h3><p>GatsbyのLinkはスタイリングするときにLinkを直接emotionで上書きしてましたが、<code>next/link</code>  はそれはできないので、Linkはそのままで直下にスタイリングしたaタグを置くのですが、その時の指定です。<br><br><a href="https://nextjs.org/docs/messages/link-passhref" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/link-passhref</a><br></p><h2 id="h8d78e14043">感想</h2><p>Gatsbyのプラグインってありがたいなー。<br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://nextjs.org/docs/migrating/from-gatsby" target="_blank" rel="noopener noreferrer">Migrating from Gatsby</a></li><li><a href="https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example" target="_blank" rel="noopener noreferrer">nextjs-micro-cms-sdk-example</a></li><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a></li><li><a href="https://qiita.com/xrxoxcxox/items/ad84e4cedde92c737001" target="_blank" rel="noopener noreferrer">ポートフォリオサイトをNetlifyからVercelへ移行した</a></li></ul>

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

BlogCategory: web

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

Category

Blog.css-1x9pui{display:inline-block;margin-left:24px;font-size:18px;}@media (max-width: 37.4375em){.css-1x9pui{display:block;margin-left:8px;font-size:16px;}}Category: web

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

Category

BlogCategory: web