Builder content link
What are you trying to accomplish
We are trying create dynamic content page with builder.io and nextjs.
Getting the following error whenever we are trying to creating dynamic routing in nextjs:
Server Error
Error: The provided path /home does not match the page: /factsheets/[name].
This error happened while generating the page. Any console logs will be displayed in the terminal window.
nextjs folder: pages/factsheets/[name].tsx
eg url: {url}/factsheets/abcd (with dynamic routing starts with /factsheets)
Screenshots or video link
Code stack you are integrating Builder with
NextJS
Reproducible code example
import { useRouter } from ‘next/router’;
import DefaultErrorPage from ‘next/error’;
import Head from ‘next/head’;
import React from ‘react’;
import { BuilderComponent, builder, useIsPreviewing, Builder } from ‘@builder.io/react’;
import ‘@builder.io/widgets’;
import ‘…/…/components’;
export async function getStaticProps( { params }:any ) {
// Fetch the first page from Builder that matches the current URL.
// Use the userAttributes field for targeting content.
// For more, see Targeting Content in Builder - Builder.io
const page = await builder
.get(‘page’, {
userAttributes: {
urlPath: ‘/’ + (params?.item?.join(‘/’) || ‘’),
},
})
.toPromise();
return {
props: {
page: page || null,
},
revalidate: 5,
};
}
export async function getStaticPaths() {
// Fetch all published pages for the current model.
// Using the fields option will limit the size of the response
// and only return the data.url field from the matching pages.
const pages = await builder.getAll(‘page’, {
fields: ‘data.url’, // only request the data.url field
options: { noTargeting: true },
limit: 0,
});
console.log(pages);
return {
paths: pages.map(page => ${page.data?.url}),
fallback: true,
};
}
export default function Page( { page }:any ) {
const router = useRouter();
// This flag indicates if you are viewing the page in the Builder editor.
const isPreviewing = useIsPreviewing();
if (router.isFallback) {
return
Loading…
;}
// Add your error page here to return if there are no matching
// content entries published in Builder.
if (!page && !isPreviewing) {
return ;
}
return (
<>
{/* Add any relevant SEO metadata or open graph tags here */}
{page?.data.title}
</Head>
{/* Render the Builder page */}
<BuilderComponent model="page" content={page} />
</>
);
}
