<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