Hello,
When building the project with yarn build I get "Error occurred prerendering page", as the data from prismic is not loaded yet when nextJS tries to build the page. Based on my console logs this happens, because the data is loaded to late to the [page].js component. However when running in yarn dev all works well as router.isFallback is waiting for the data...
For reference here is the repository: https://github.com/hejsfj/mateo-website
This is the code, which does the trouble:
import React from "react";
import { useRouter } from "next/router";
import Head from "next/head";
import ErrorPage from "next/error";
import Header from "../components/Header";
import Layout from "../components/layout";
import { getAllPagesWithSlug, getPage } from "../lib/api";
import SliceZone from "../components/SliceZone";
export default function Page({ preview, page }) {
const router = useRouter();
console.log("Page Data inside function Page" + page);
console.log("Router Fallback status:" + router.isFallback);
return (
<Layout preview={preview}>
<Header />
{router.isFallback ? (
<div className="container mx-auto px-5">Loading...</div>
) : (
<>
<Head>
<title>MATEO</title>
</Head>
<SliceZone sliceZone={page.body}></SliceZone>
</>
)}
</Layout>
);
}
export async function getStaticPaths() {
const allPages = await getAllPagesWithSlug();
return {
paths: allPages?.map(({ node }) => `/${node._meta.uid}`) || [],
fallback: true,
};
}
export async function getStaticProps({ params, preview = false, previewData }) {
const data = await getPage(params.page, previewData);
console.log("Data from getPage inside [page].js" + data);
if (!data) {
return {
notFound: true,
};
}
return {
props: {
preview,
page: data?.page ?? null,
},
};
}
Inside api.js:
export async function getPage(slug, previewData) {
console.log("API: Get Page Data");
console.log("API Slug" + slug);
console.log("API Preview" + previewData);
const data = await fetchAPI(
`
query PageBySlug($slug: String!, $lang: String!) {
page(uid: $slug, lang: $lang) {
title
body {
__typename
...on PageBodyPlain_hero{
type
label
primary{
section_title
}
}
...on PageBodyText{
type
label
primary{
section_description
}
}
}
_meta {
uid
}
}
}
`,
{
previewData,
variables: {
slug,
lang: API_LOCALE,
},
}
);
return data;
}