NextJS - getStaticPaths - Paths seems not bound to one of the params

599 views Asked by At

My Next.js app's pages are provided by an API, each with a uri_prefix and a uri. The uri_prefix is mandatory, and can be c or s for now. But any letter could be chosen in the end.

It's a pretty simple structure :

pages
   |-[prefix]
   |     |
   |     |-[slug]

The [slug].jsx page that handles it uses ISG.

So far, the getStaticPath fallback was set to true, so that if an admin creates new pages (eg. {uri_prefix : c, uri : newpage1} & {uri_prefix : s, uri : newpage2}) in the backoffice, ISG generates the static /c/newpage1 and /s/newpage2 file when they are first triggered.

But once generated, trying alt url such as /x/newpage or /whatever/newpage also fires up the page, which is somewhat unexpected (and unwanted). Reading the doc, I thought it would allow only existing prefixes.

Setting fallback to false forbids unwanted urls but also requires a new build of the app, which is not convenient.

I'd like to have /c/newpage1 or /s/newpage2 rendered, but not /c/newpage2 nor /s/newpage1 (nor /somethingelse/newpage* of course). Each page associated with it's own prefix only.

Did I misunderstood how the fallback works ?

Is ther an obvious mistake in the code or is there another way to achieve ISG for new pages without whole build while forbidding unwanted urls ?

Here is the [slug].jsx page :

import Layout from '@/components/Layout';
import SmallCard from '@/components/SmallCard';
import {useRouter} from 'next/router';

export default function src({products, seo}) {

  const router = useRouter();
  if(router.isFallback) {
    return (
      <h1>Loading new page...</h1>
    )
  }

  return (
    products ? (
      <Layout title={seo[0].title} description={seo[0].description}>
        <div>
          <div className='container-fluid my-5'>
            <div className="row justify-content-center">
              <h1>{seo[0].h1}</h1>
            </div>
            <div className="row justify-content-center">
              {products.map(
                (product)=>(
                  <SmallCard product = {product}/>
                )
              )}
            </div>
          </div>
        </div>
      </Layout>
    ) : (
      <Layout title={seo[0].title} description={seo[0].description}>
        <h1>{seo[0].h1}</h1>
        <div dangerouslySetInnerHTML={{__html: seo[0].content_front}}/>
      </Layout>
    )
  )
}

export async function getStaticPaths() {

  const resPages = await fetch(`${process.env.API_BASE_URL}/path/to/pagesapi`);
  const pages = await resPages.json();
  const paths = pages.map((page) => ({
      params: {
        prefix: page.uri_prefix,
        slug: page.uri
      },
    }))

    return {
        paths,
        fallback: true
  };
}

export async function getStaticProps({ params: { slug } }) {
  const resPages = await fetch(`${process.env.API_BASE_URL}/path/to/pagesapi`);
  const pages = await resPages.json();
  const seo=pages.filter(page=> page.uri == slug);

  if(seo[0].src) {
    const src=seo[0].src;
  
    // get products
    const resProducts = await fetch(`${process.env.API_BASE_URL_LEGACY}${src}`);
    var products = await resProducts.json();
  } else {
    var products = null
  }

    return {
        props: {
            products,
            seo
        },
        revalidate:60,
    };
}

Thanks in advance.

0

There are 0 answers