Next.js Discord

Discord Forum

generateStaticProps() broken error

Answered
Schweizer Laufhund posted this in #help-forum
Open in Discord
Schweizer LaufhundOP
Running into this error, not sure what it means
 ⨯ Error: Page "/[[...slug]]/page" is missing param "/2024/Winter" in "generateStaticParams()", which is required with "output: export" config.
    at DevServer.renderToResponseWithComponentsImpl (/home/gene/React/Anichart/client/node_modules/next/dist/server/base-server.js:1030:27) {
  page: '/2024/Winter'
}

/2024/winter is a link to a certain route
Answered by Ray
if you are using static export, you need to tell next all the possible route
so you need to export generateStaticParams function on app/[[...slug]]/page.tsx like this
export function generateStaticParams() {
  return [{ slug: ["2024", "Winter"] }];
}
View full answer

39 Replies

Schweizer LaufhundOP
Here's my current file structure, App.tsx contains all my routes. I haven't done any dynamic routing yet
Schweizer LaufhundOP
Also, getting this error regarding favicon.ico which is located in public/ 
Error: Page "/[...slug]/page" is missing param "/public/favicon.ico" in "generateStaticParams()", which is required with "output: export" config.
    at DevServer.renderToResponseWithComponentsImpl (/home/gene/React/Anichart/client/node_modules/next/dist/server/base-server.js:1030:27) {
  page: '/public/favicon.ico'
Favicon isn't a page so not sure what this means
Answer
@Ray if you are using static export, you need to tell next all the possible route so you need to export `generateStaticParams` function on `app/[[...slug]]/page.tsx` like this ts export function generateStaticParams() { return [{ slug: ["2024", "Winter"] }]; }
Schweizer LaufhundOP
My page has url paths: /2024/Winter , /2024/Summer, /2024/Spring, /2024/Fall. Do I have to separate the 2024 and Winter in the slug array? Because /2024 isn't supposed to lead to any route
@Schweizer Laufhund My page has url paths: /2024/Winter , /2024/Summer, /2024/Spring, /2024/Fall. Do I have to separate the 2024 and Winter in the slug array? Because /2024 isn't supposed to lead to any route
Ray
export function generateStaticParams() {
  return [
    { slug: ["2024", "Winter"] },
    { slug: ["2024", "Summer"] },
    { slug: ["2024", "Spring"] },
    ....
  ];
}
Ray
it should be 404 if you go to /2024
@Ray it should be 404 if you go to /2024
Schweizer LaufhundOP
If I go to /2024 I get this Server Error
Error: Page "/[...slug]/page" is missing param "/2024" in "generateStaticParams()", which is required with "output: export" config.
. I got /2024/Winter working though
export function generateStaticParams() {
  return [
    { slug: [`${firstSeason.year}`, firstSeason.season] },
    { slug: [`${secondSeason.year}`, secondSeason.season] },
    { slug: [`${thirdSeason.year}`, thirdSeason.season] },
    { slug: [`${fourthSeason.year}`, fourthSeason.season] },
  ];
}
it will be 404 in production
Schweizer LaufhundOP
is there a way to get it to display my error.tsx or notfound.tsx component
Ray
you could make a custom not-found page with src/app/not-found.tsx
Schweizer LaufhundOP
I do have one currently doesnt look like its appearing though
@Ray you could make a custom not-found page with `src/app/not-found.tsx`
Schweizer LaufhundOP
Do I need to put a not found function inside [...slug]/page.jsx?
how do you start your site?
Schweizer LaufhundOP
npm run dev
Ray
it only work on production
Schweizer LaufhundOP
ok so the nextjs error is normal
Ray
yes
try build it
and npx serve@latest out
@Ray and npx serve@latest out
Schweizer LaufhundOP
I just get all pages with 404 for this
@Schweizer Laufhund I just get all pages with 404 for this
Ray
could you show the build log?
@Ray could you show the build log?
Schweizer LaufhundOP
Ray
the pages are there
do you have distDir in next.config.js?
Schweizer LaufhundOP
Yes 
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export', // Outputs a Single-Page Application (SPA).
    distDir: './dist', // Changes the build output directory to `./dist/`.
  }
   
  export default nextConfig
Ray
ok npx serve@latest dist
Schweizer LaufhundOP
Same issue
Idk if this is related but my 
/app/page.jsx
should automatically redirects to /2024/Winter 
export default function Page() {
  const firstSeason = seasonInfo.firstSeason;
  redirect(`/${firstSeason.year}/${firstSeason.season}`);
}
Ray
do you see the dist folder?
Schweizer LaufhundOP
yeah
oh im dumb
i was serving from wrong directory
@Schweizer Laufhund Same issue
Ray
yeah you were inside app folder?
@Ray yeah you were inside app folder?
Schweizer LaufhundOP
yeah looks like its working properly now, thank you