Nextjs getStaticProps error

Developing with Prismic
1

Hi,
I am using Nextjs + Prismic and am having trouble using getStaticProps function
I followed the nextjs prismic guide but I'm not sure what I am doing wrong

(I am using "@prismicio/client": "^6.7.3",
"@prismicio/helpers": "^2.3.8",
"@prismicio/next": "^1.0.2",
"@prismicio/react": "^2.5.1",
"@prismicio/slice-simulator-react": "^0.2.3",)

prismicio.js:

import * as prismic from "@prismicio/client";
import * as prismicNext from "@prismicio/next";
import sm from "./sm.json";

/**
 * The project's Prismic repository name.
 */
export const repositoryName = prismic.getRepositoryName(sm.apiEndpoint);

// Update the routes array to match your project's route structure
/** @type {prismic.ClientConfig['routes']} **/
const routes = [
  {
    type: "homepage",
    path: "/",
  },
  {
    type: "page",
    path: "/:uid",
  },
  {
    type: "works",
    path: "/works/:uid",
  },
];

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config {prismicNext.CreateClientConfig} - Configuration for the Prismic client.
 */
export const createClient = (config = {}) => {
  const client = prismic.createClient(sm.apiEndpoint, {
    routes,
    ...config,
  });

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  });

  return client;
};

pages/_app.js:

import "tailwindcss/tailwind.css";
import "../styles/globals.css";
import Link from "next/link";
import { PrismicProvider } from "@prismicio/react";
import { PrismicPreview } from "@prismicio/next";
import { repositoryName } from "../prismicio";
import Footers from "../components/Footers";
import { AnimatePresence } from "framer-motion";
import { useState, useEffect } from "react";
import Router, { useRouter } from "next/router";

export default function App({ router, Component, pageProps }) {
  return (
    <>
      <PrismicProvider internalLinkComponent={(props) => <Link {...props} />}>
        <PrismicPreview repositoryName={repositoryName}>
          <Component {...pageProps} router={router} /> <Footers />
        </PrismicPreview>
      </PrismicProvider>
    </>
  );
}

pages/works.js

import { createClient } from "../prismicio";

export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData });

  const works = await client.getAllByType("works", {
    orderings: {
      field: "document.first_publication_date",
      direction: "desc",
    },
  });

  return {
    props: { works }, // Will be passed to the page component as props
  };
}

export default function Works({ works }) {
  console.log(works);
  return (
    <>
      <WorksPage />
    </>
  );
}

And I get this error:

Screen Shot 2023-02-12 at 4.43.31 PM
Screen Shot 2023-02-12 at 4.43.31 PM1920×1167 147 KB

3

getStaticProps is expecting a content type of works, but it looks like you're passing a type of page and another of homepage.

Can you post your Link Resolver and/or Route Resolver?

8

Hello @yek99kr,

My apologies for just responding.

Thank you, @jgunderson, for your response.

For details, there is a conflict between linkresolver and /pages/works.js.

In Linkresolver:

 {
    type: "page",
    path: "/:uid",
  },

whereas at /pages/works.js

const works = await client.getAllByType("works", {
    orderings: {
      field: "document.first_publication_date",
      direction: "desc",
    },
  });

So all routes at the same level under /pages will check for type as "page", but in query at /pages/works.js, the type is "works".

Either you have to change the type as "page" in the works.js or change the type in linkresolver for works.

Kind regards,
Racheal.