👀 See Sanity in action: Watch product demo now →

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
or
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.io – build remarkable experiences at scale

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

Categorized in