Next Sanity Index

index.js

// pages/index.js

import React from "react";
import { groq } from "next-sanity";
import { usePreviewSubscription, urlFor, PortableText } from "../lib/sanity";
import { getClient } from "../lib/sanity.server";
import { useRouter } from "next/router";
import ErrorPage from './ErrorPage';
import HomeComponent from '../components/HomeComponent';

const query = groq`*[_type == "home" && live == true && !defined(*[_id == "drafts." + ^._id][0])][0]{
   ...
}`;

export default function Index({ pageProps }) {
  const { data, preview } = pageProps;
  const router = useRouter();

  const { data: post } = usePreviewSubscription(query, {
    params: { slug: undefined },
    initialData: data,
    enabled: preview && data?.slug,
  });

  if (!router.isFallback && data && !data?.slug) {
    return <ErrorPage statusCode={404} />;
  }

  return <HomeComponent data={post}/>;
}

export async function getStaticProps({ params, preview = false }) {
  const data = await getClient(preview).fetch(query);

  return {
    props: {
      preview,
      data,
    },
  };
}