<p>Gatsbyに不満があったわけではないですが（むしろ今回の移行でGatsbyのありがたみも感じられた）、ほとんど動向を追えてないし、案件で使うとしたらNext.jsだろうなとか、Next.jsの方の盛り上がりを見ると、Next.jsに集中した方がいい気がしたので移行しました。NetlifyからVercelにしたのは惰性です。</p><p></p><p>Gatsbyの部分をNext.jsに変えただけで、既存のスタイルやコンポーネントはほとんどそのまま活かしました。ただ、Netlifyやめたせいで、Netlify Formが使えなくなり、お問い合わせフォームはなくなりました。個人なのでそんなに必要ないし問題ないです。</p><p></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></p><h2 id="haba26375cd">GatsbyではOKだったけど、Next.jsではNGだったこと</h2><h3 id="h8853244ec8">Linkタグ直下はタグひとつ</h3><p>こういうのがダメみたいです</p><pre><code>&lt;Link href=&quot;/about&quot;&gt;
  &lt;a&gt;To About&lt;/a&gt;
  &lt;a&gt;Second To About&lt;/a&gt;
&lt;/Link&gt;
</code></pre><p></p><p><a href="https://nextjs.org/docs/messages/link-multiple-children"><u>https://nextjs.org/docs/messages/link-multiple-children</u></a></p><p></p><h3 id="h2be7de5add">Linkタグの中にaタグを書くときはpassHrefつける</h3><p>GatsbyのLinkはスタイリングするときにLinkを直接emotionで上書きしてましたが、<code>next/link</code> はそれはできないので、Linkはそのままで直下にスタイリングしたaタグを置くのですが、その時の指定です。</p><p></p><p><a href="https://nextjs.org/docs/messages/link-passhref"><u>https://nextjs.org/docs/messages/link-passhref</u></a></p><p></p><h2 id="h8d78e14043">感想</h2><p>Gatsbyのプラグインってありがたいなー。</p><p></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://nextjs.org/docs/migrating/from-gatsby" target="_blank" rel="noopener noreferrer nofollow"><u>Migrating from Gatsby</u></a></li><li><a href="https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example" target="_blank" rel="noopener noreferrer nofollow"><u>nextjs-micro-cms-sdk-example</u></a></li><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow"><u>microCMS + Next.jsでJamstackブログを作ってみよう</u></a></li><li><a href="https://qiita.com/xrxoxcxox/items/ad84e4cedde92c737001" target="_blank" rel="noopener noreferrer nofollow"><u>ポートフォリオサイトをNetlifyからVercelへ移行した</u></a></li></ul>

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

穏やかに晴れていた空が、一瞬にして表情を変え、猛吹雪が視界を白く閉ざしていく。冬の東北では、どれほど文明が発達しようとも、人は静かに自然の猛威を受け入れるしかない時がある。だからこそ、人々は祭りに身を投じ、己の内に秘めた力を解き放つことで、自然の厳しさ耐え、立ち向かう精神を培ってきたのだろう。
何度も繰り返されてきた厳冬の中での祭りは、ただの行事ではなく、自然とともに生き抜く覚悟の証なのかもしれない。

目まぐるしい時代の変化の中で、人々は新しい風を敏感に感じ取り、日々の暮らしに順応していく。その一方で、古くから息づいてきたものは意識の外へ押しやられ、いつの間にか遠い存在になってしまうこともある。
しかし、人々が紡いできた営みや大地にしみ込んだ記憶は消えることなく、姿を変えながらも生き続け、時代を超えて私たちを迎えてくれる。
そして移ろう時代の中で、変わらぬものに触れるひとときが未来への希望となり私たちを導いてくれる。

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

Category