We're using Slice Machine to build a new website with Next.js. I'm currently stuck trying to get our blog posts to render out in the next app. Here are the contents of my pages directory:
Everything works as expected, with the exception of
pages/blog/[uid].tsx. Here are the contents of that file:
import SliceZone from 'next-slicezone';
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks';
import { Client } from '../../prismic-configuration';
import Layout from '../../components/Layout';
import resolver from '../../sm-resolver';
type Props = any;
export default function BlogPost(props: Props) {
console.log({ props });
return (
<Layout globals={props.globals}>
<h1>Blog template</h1>
<SliceZone {...props} resolver={resolver} />
</Layout>
);
}
// Fetch content from prismic
// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticProps = useGetStaticProps({
client: Client(),
type: 'blog',
apiParams({ params }: any) {
return {
uid: params.uid,
};
},
});
// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticPaths = useGetStaticPaths({
client: Client(),
formatPath: (prismicDocument: any) => {
return {
params: {
uid: prismicDocument.uid,
},
};
},
});
When I try to access http://localhost:3000/blog/test-blog-post I am presented with the following:
In prismic I have a repeatable type of "Blog" with the api id of "blog".
