Implementing Static Site Generation with Next.js App Router for Dynamic Routes in Production

Question

I'm using Next.js's new App Router for my portfolio to showcase projects with dynamic routing (src/app/projects/[id]/page.tsx). In development, useSearchParams correctly fetches the project ID, but in production, it returns null, causing my SSG (Static Site Generation) setup to fail in fetching project details.

Since I am semi-new in next.js, I though I can use the way that I use inside the development in production as well.

This is the way that I use to take the id from the query and show the related project based on the taken id:

export default function ProjectPage({ params }: { params: { id: string } }) {
    const project = data.find(p => p.id === params.id);

    if (!project) {
        return <div>Project not found</div>;
    }

    const Explanation = project.explanation;

    return (
 {My Jsx Components})
}

Now, I want to migrate from development to production and this is the error I get:

Build error occurred Error: Page "/projects/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. at C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\build\index.js:1241:59 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Span.traceAsyncFn (C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\trace\trace.js:151:20) at async Promise.all (index 6) at async C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\build\index.js:1119:17 at async Span.traceAsyncFn (C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\trace\trace.js:151:20) at async C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\build\index.js:1042:124 at async Span.traceAsyncFn (C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\trace\trace.js:151:20) at async build (C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\build\index.js:348:9) at async main (C:\Users\alish\WebstormProjects\my-website-client\node_modules\next\dist\bin\next:155:5) Collecting page data .

After struggling and search for the solution I found out that I cannot use generateStaticParams() and generateStaticPaths() in App routing (because apparantely it has to be under pages folder)

Then I also tried loader function as well in which I ended up with error again. Can anyone help me what I can do to fix this issue ? PS: I am using NextJs next": "^14.1.1"

Ali Shahbazi · Accepted Answer · 2024-03-01 00:11:27Z

5

Update: After searching about 2-3 hours, I found out that till today (29th of Feb 2024), there is kinda impossible to use NextJs with App routing (dynamic routing) with static paths. The easiest solution for now, is to use the traditional way which is use /pages in the root of the project. You can easily use hook useRouter to get the id and do the static path. Here down below I will share my code inside the [id].tsx which has routing:

export default function ProjectPage() {
    const router = useRouter();
    const {id} = router.query;
    const project = data.find((project) => project.id === id);
}

answered Mar 1, 2024 at 0:11

Ali Shahbazi

1111 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing Static Site Generation with Next.js App Router for Dynamic Routes in Production

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related