How to use GetInitialProps and GetServerSideProps in Next.js

1 replies

Last updated: Jun 23, 2021

Hey guys, can someone please advice. I recently started working with Next.js. Works perfect with Sanity really easy to fetch data and to create dynamic routes. Now I would like to know can someone please advice what to use if I have to fetch data with “getInitialProps” and “getServerSideProps” it really confuses me. On the Next.js website it’s recommend to use the getInitialProps all all time. Which one to use?
Thanks
😄

Jun 22, 2021, 11:29 PM

Hi Nino.

getInitialProps

is still supported but was effectively replaced by

getStaticProps

and

getServerSideProps

. I’d recommend using the latter two instead.
There are many ways you can approach it, but I tend to put my fetches in an api file (/lib/api.js) and import that where it’s needed. That api.js file will import a configured Sanity client and might look like:

export async function getPostsByName(name) {
  const result = await client.fetch(
    `*[_type == "post" && involved[]->slug.current match $name] | order(date desc) {
        title,
        'impacts': impacts[]->,
        featured,
        date,
        excerpt,
        'slug': slug.current,
        'coverImage': image,
      }`,
    { name }
  );

  return result;
}

export async function getAllPosts() {
  const result = await client.fetch(
    `*[_type == "post"] | order(date desc, _updatedAt desc) {
      title,
      'impacts': impacts[]->,
      featured,
      date,
      excerpt,
      'slug': slug.current,
      'coverImage': image,
    }`
  );

  return result;
}

export async function getStaffBySlug(slug) {
  const result = await client.fetch(
    `*[_type == "staff" && slug.current == $slug] {
      firstName,
      lastName,
      'department': department->name,
      position,
      image,
    }`,
    { slug }
  );

  return result;
}

Then in a page, you’ll use

getStaticProps

getServerSideProps

to fetch your data by calling your functions. If you’re using

getStaticProps

, you might also use

getStaticPaths

to specify dynamic routes.
Whichever you use determines whether you are fetching at build time or run time. The

get…Props()

functions can return a props object that gets passed into your page component. From there, you will use that props object to construct your page.

Jun 23, 2021, 2:09 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for free Explore the demo

How to use GetInitialProps and GetServerSideProps in Next.js

Sanity– build remarkable experiences at scale

Was this answer helpful?