Error: Page is missing param "generateStaticParams()", which is required with "output: export" config

I am seeing this error only during navigation, This error is only during navigation and goes away on refreshing the browser

Error: Page "/(publish)/logs/publish/[id]/page" is missing param "/logs/publish/BrWyKK8oGhiSAnTrLDAX" in "generateStaticParams()", which is required with "output: export" config.

This is the folder structure of the app using app router with multiple layouts

root /
    ├──src
    │    ├── app /
    │    │    ├── (main)/
    │    │    │    ├── _models/
    │    │    │    │   ├── Log.ts
    │    │    │    ├── _services/
    │    │    │    │   ├── LogService.ts
    │    │    │    ├── _components/
    │    │    │    │   ├── Sidebar.tsx
    │    │    │    │   ├── Navbar.tsx
    │    │    │    │   ├── Pastelog.tsx
    │    │    │    │   │
    │    │    │    ├── logs /
    │    │    │    │   ├──[id]
    │    │    │    │   │   └── page.tsx
    │    │    │    │   └── layout.tsx
    │    │    │    │   └── page.tsx
    │    │    ├── (publish)/
    │    │    │    ├── logs /
    │    │    │    │   ├── publish /
    │    │    │    │   │    ├──[id]/
    │    │    │    │   │        └── page.tsx
    │    │    │    └── layout.tsx
    │    │    │
    │    │    └── layout.tsx
    │    │    └── global.css
    │    │    └── page.tsx

I have a sidebar and a MainContent (Pastelog/Preview)

renders

Pastelog: at baseurl/logs Preview: at baseurl/logs/[id]

Sidebar is a client component which renders list of logs from local storage (works fine)
Pastelog has a button to publish the logs and redirect to baseurl/logs/publish/id

When I hit publish I am saving the data to firestore and local storage and redirecting to dynamic route

(method to publish)

    async function publish() {
        setLoading(true);
        const log = new Log(
            expiryDate.toDate('UTC'),
            content,
            new Date(),
            LogType.TEXT,
            true,
            title,
            false,
        );
        const id = await logService.publishLog(log);
        if (!id) {
            setLoading(false);
            return;
        }
        router.push(`/logs/publish/${id}`);
        setLoading(false);
    }

The data is getting stored in both local storage and firestore but when I redirect to dynamic route I am seeing this error

Error: Page "/(publish)/logs/publish/[id]/page" is missing param "/logs/publish/BrWyKK8oGhiSAnTrLDAX" in "generateStaticParams()

// logs/publish/[id]/page.tsx
import Preview from '@/app/(main)/_components/Preview';
import LogService from '@/app/(main)/_services/logService';

// This is required for dynamic routing in runtime
export const dynamicParams = true;

export async function generateStaticParams() {
    const logService = new LogService();
    const logs = await logService.fetchLogs();
    // logs.forEach(log => console.log(log.id));
    return logs.map(log => ({ id: log.id }));
}
export default function PublishPage({ params }: { params: { id: string } }) {
    const { id } = params;
    return <Preview
        logId={id}
    />
};

I am expecting the dynamic page to load at logs/publish/id I checked the logs when generateStaticParams is invoked

const logs = await logService.fetchLogs();

contains the id of the newly published page meaning the document was saved to database

if anyone is interested to skim through the source code

Try the app here: http://pastelog.web.app/

next.config.mjs

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

export default nextConfig;

Solution

You've basically added a output attribute in next.config.mjs.

This makes a static build.

However, static build pre-renders all the content.

So in development, after you visit any log, It'll cache all the logs at once, and display those logs.

If you try to publish any logs after that, It won't work because it had already cached all the logs, and it won't cache any new logs

A Simple Fix would be to remove output attribute from next.config.mjs, and also remove generateStaticParams function.