Migrate to Next JS

[armstrongl]

This is an experiment to implement the site as a Next.js site instead of Gatsby.

Vercel has a tutorial on Migrating from Gatsby, which is useful but doesn't cover how to use Next.js with Sanity.io as a CMS. Luckily, Sanity has a tutorial on Making a blog with Next.js, React, and Sanity as well as an example project.

I decided not to migrate the existing web directory because it's going to get a little too messy but instead start from scratch, then move the important parts over.

Here are the equivalents between our Gatsby setup and what our Next.js setup will look like:

• Global CSS: gatsby-browser.js :arrow_right: Next.js's __app.js
• Images: gatsby-image :arrow_right: next/image
• Templates: src/templates :arrow_right: pges/blog/[slug].js (this might be different with Sanity in the picture)
• Links: Gatsby Link :arrow_right: Next.js Link (switch to to href, and add an <a> tag as a child of the element)
• Site configuration: gatsby-config.js :arrow_right: config.js
• SEO: react-helmet :arrow_right: next/head

[netlify[bot]]

✔️ Deploy Preview for mcnuggies-dev-studio canceled.

🔨 Explore the source changes: 1911a1f29c480737f4cdd16b5b1eeef5c660eb35

🔍 Inspect the deploy log: https://app.netlify.com/sites/mcnuggies-dev-studio/deploys/61f6f83f6e1f8a0008d7f03c

[netlify[bot]]

✔️ Deploy Preview for mcnuggies-dev canceled.

🔨 Explore the source changes: 1911a1f29c480737f4cdd16b5b1eeef5c660eb35

🔍 Inspect the deploy log: https://app.netlify.com/sites/mcnuggies-dev/deploys/61f6f84571678400076f27ab