Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next.js 14.2.4 generateStaticParams throw error

Here is the /[work]/page.js

export function generateStaticParams() {
  return [
    { id: "work-1" }
    { id: "work-2" }
    { id: "work-3" }
  ]:
}

export default function WorkPage({ params }) {
  const { id } = params;
  ...

and here is my nexjs.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  reactStrictMode: true,
  images: { unoptimized: true },
};

export default nextConfig;

I am getting this error message:

Error: Page "/[work]/page" is missing param "/work-1" in "generateStaticParams()", which is required with "output: export" config.

Tags:

2

Answers


  1. 0

    It looks like there are a couple of issues with your code. The array returned by generateStaticParams() is missing commas between the objects, and the next.config.mjs file is correct as it is. Here is the corrected version of your code:

    /pages/[work]/page.js

    export function generateStaticParams() {
  return [
    { id: "work-1" },
    { id: "work-2" },
    { id: "work-3" }
  ];
}

export default function WorkPage({ params }) {
  const { id } = params;
  // Your component logic here
}

    next.config.mjs

    /** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  reactStrictMode: true,
  images: { unoptimized: true },
};

export default nextConfig;

    Ensure that you have commas separating each object in the array returned by generateStaticParams. This should resolve the error you are encountering.

    Login or Signup to reply.
  2. 0

    To resolve the error "Page /[work]/page is missing param /work-1 in generateStaticParams(), which is required with output: export config", follow these steps:

    Correct Project Setup for Next.js 14 with App Routing

    1. Ensure Correct Syntax and Configuration:

    • Verify that your generateStaticParams function returns the correct structure.
    • Correctly set up dynamic imports for the components.
    • Make sure the configuration in next.config.mjs is accurate.

    2. Project Structure:

    Ensure your project directory is correctly structured for the Next.js app router.

    Solution
    1. Corrected app/[work]/page.js

    Ensure your generateStaticParams function and the page component handle dynamic routing properly:

    // app/[work]/page.js

import dynamic from 'next/dynamic';

const Work1 = dynamic(() => import('../works/work1'));
const Work2 = dynamic(() => import('../works/work2'));
const Work3 = dynamic(() => import('../works/work3'));

export async function generateStaticParams() {
  return [
    { id: "work-1" },
    { id: "work-2" },
    { id: "work-3" },
  ];
}

export default function WorkPage({ params }) {
  const { id } = params;

  let WorkComponent;
  if (id === "work-1") {
    WorkComponent = Work1;
  } else if (id === "work-2") {
    WorkComponent = Work2;
  } else if (id === "work-3") {
    WorkComponent = Work3;
  } else {
    WorkComponent = () => <div>Work not found</div>;
  }

  return (
    <div>
      <h1>Work Page for {id}</h1>
      <WorkComponent />
    </div>
  );
}

    2. Example of a Work Component (app/works/work1.js)

    Ensure each work component is correctly defined and exported:

    // app/works/work1.js

export default function Work1() {
  return (
    <div>
      <h2>Work 1</h2>
      {/* Your work 1 content here */}
    </div>
  );
}

    3. Configuration in next.config.mjs

    Ensure your Next.js configuration is correctly set up:

    // next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  reactStrictMode: true,
  images: { unoptimized: true },
};

export default nextConfig;

    4. Directory Structure

    Ensure your directory structure is correct for Next.js 14 app routing:

    project-root/

    ├── app/
│   ├── [work]/
│   │   └── page.js
│   ├── works/
│   │   ├── work1.js
│   │   ├── work2.js
│   │   └── work3.js
├── next.config.mjs

    Rebuild and Export

    After making these changes, rebuild and export your Next.js project:

    1. Build your project:

    npm run build

    2. Export your project:

    npm run export

    Summary

    By ensuring the correct setup and structure, entering localhost:3000/work-1 should correctly mount the Work1 component. This approach resolves the error related to missing params in generateStaticParams when using output: export.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search