Upgrading Nhost to Nextjs14

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

I had avoided it for too long. Each pass at it had left me frustrated with it, so I would involve myself with other pursuits instead of getting it done. It started to become the elephant in the room for me. How can I respect myself if I can’t upgrade my Nhost/NextJS application that was working fine on NextJS 12 to NextJS 14+? Isn’t it a matter of just sprinkling some:

'use client'

everywhere? How hard could it be? Don’t I know how to render data on the server? getServerSideProps , anyone? I mean - this can’t be that hard, can it? I’m here going to share with you the process I took to update my code on AgSilo.com to the new data-fetching paradigm.

What I started with

You really have to think through every decision you’ve made and potentially restructure everything. For instance, I had a landing page that had all of the listings sorted by distance for a user which would link to detail pages which were statically generated at build time but also effectively server-side rendered by the slug variable from the path. This means I’ll have to ensure that I have a getStaticPaths method on that /equipment/[slug]/page which lets me fetch all the equipment to get rendered at build time.

To get started, I started by reading the official checklist for capturing data server side for getting my pages to render on first request, fully with their data.

Standard getServerSideProps call

export const getServerSideProps = (async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the clickable button below.