CODEWITHSUNDEEP
next.jsgeneratestaticparams
Simonxdev
Simonxdev

Reputation: 1

generateStaticParams with static export fails building paths

I am working on a Next.js Project. I am trying to Build the Page with output: export inside of the Config File.

My generateStaticParams uses this Code:

export async function generateStaticParams() {
  const paths = await getActivePaths([PageTypeEnumeration.LANDING_PAGE, PageTypeEnumeration.PRODUCT_PAGE]);

  return paths.map(path => {
    const fullPath = process.env.PRODUCT + path;
    return {slug: fullPath.split('/')};
  });
}

export const dynamicParams = false;

This gives me the following Output, which is totally correct as i see it:

[
  {
    slug: [ 'product', 'lp', 'testpage' ]
  },
  {
    slug: [ 'product', 'lp', 'testpage2' ]
  }
]

I use a Catch all Route (app/[...slug]/page.tsx) and pass in the Params like this:

export default async function Home({params}: ParamsType) {
  const {slug} = params;

Now in Dev Mode and running the Build without output: export everything works fine. But if i use output: export in the Config File it fails building the static Paths.

Heres the logged Output:

 ✓ Generating static pages (6/6) 
   Finalizing page optimization  ..params { slug: [ '%5B...slug%5D' ] }
   Finalizing page optimization  ...(node:8101) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
params { slug: [ '%5B...slug%5D' ] }

Error occurred prerendering page "/[...slug]". Read more: https://nextjs.org/docs/messages/prerender-error

 Export encountered errors on following paths:
        /[...slug]/page: /[...slug]
   Finalizing page optimization  .%

I hope someone can help me with this, cause i don't know what to do further.

Already tried to use export const dynamic = 'force-static'; inside of Page.tsx as i saw it as possible Fix.

Upvotes: 0

Views: 658

Answers (2)

Simonxdev
Simonxdev

Reputation: 1

I will try to explain the problem further:

I am using a catch all route with generateStaticParams, everything works fine in dev mode and with normal build. Only if i use output:export in the config the params passed into the Page component somehow get broken in Step 6 while doing "Finalizing page optimization". The params get URL-encoded as it looks. I am passing this Param into fetch functions, to then receive Data from a CMS API. So with static export the fetches dont work. I will try to explain step by step:

GenerateStaticParams on catch all route page -> /app/[...slug]/page.tsx:

export async function generateStaticParams() {
    const paths = await getActivePaths([PageTypeEnumeration.LANDING_PAGE, PageTypeEnumeration.PRODUCT_PAGE]);
    return paths.map(path => {
        const fullPath = process.env.PRODUCT + path;
        return { slug: fullPath.split('/') };
    });
}

Page Component receiving params and passing into fetch function:

export default async function Home({ params }: ParamsType) {
    const { slug } = params;
    const activeComponents: ActiveComponentsType = await getActiveComponents({ slug }, [
        PageTypeEnumeration.LANDING_PAGE,
        PageTypeEnumeration.PRODUCT_PAGE,
    ]);
}

Params logged out in dev mode and normal build (looks good), below the logged out params with output:export

// Dev Mode and normal Build
{
    slug: ['product', 'lp', 'testpage2']
}
// Build with output:export
{ slug: ['%5B...slug%5D'] }

Upvotes: 0

Simonxdev
Simonxdev

Reputation: 1

Using SSL in the fetches did not change the problem. What i notice is the following:

I use the param (page alias) coming in as prop inside of the page component inside the first fetch to get the data for this page from my cms api.

Now when running the build with 'output: export' again i logged the fetched data in every step. It fetches the data in steps 1-5 and everything looks good. Only in Step 6 it fails to load the params correctly, the error says this:

 Export encountered errors on following paths:
    /[...slug]/page: /[...slug]
 Finalizing page optimization  .%

Now it is trying to use this param in the fetches, which fails. The Param should be like this: '/lp/landingpage/name'. Now i wonder, what is so different in the Step 6 of the Building Process ?

Upvotes: 0

Related Questions