Dynamic routes resolve in 404 using generateStaticParams

Help
1

Currently all my dynamic routes resolve in a 404. I have a folder [...slug] with a file page.tsx. In this page.tsx I use generateStaticParams to fetch all routes.
Working in my local environment it works as expected but after deploying with Vercel it breaks.

I’ve integrated Storyblok in a NextJS project. My build script is just next build and I have not changed the output directory or else.

the file next.config.js

 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
    env: {
        STORYBLOK_PREVIEW_TOKEN: process.env.STORYBLOK_PREVIEW_TOKEN,
        STORYBLOK_PUBLIC_TOKEN: process.env.STORYBLOK_PUBLIC_TOKEN,
        ENVIRONMENT: process.env.ENVIRONMENT,
    },
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "a.storyblok.com",
                port: "",
                pathname: "/f/siteID/**",
                search: "",
            },
        ],
        dangerouslyAllowSVG: true,
        contentDispositionType: "attachment",
        contentSecurityPolicy:
            "default-src 'self'; script-src 'none'; sandbox;",
    },
};

export default config;

the file [...slug]/page.tsx

export const dynamicParams = false;

export async function generateStaticParams() {
    const storyblokApi = getStoryblokApi();
    const { data } = await storyblokApi.get(
        "cdn/links/",
        {
            version: env === "production" ? "published" : "draft",
        },
        { cache: "no-cache" },
    );

    const paths: { params: { slug: string } }[] = [];

    /* eslint-disable */
    Object.keys(data.links).forEach((linkKey) => {
        if (
            data.links[linkKey].is_folder ||
            data.links[linkKey].slug === "home"
        ) {
            return;
        }

        const slug = data.links[linkKey].slug;
        const splittedSlug = slug.split("/");

        paths.push({ params: { slug: splittedSlug } });
    });
    /* eslint-enable */

    return paths;
}

export default async function Page(props: { params: Promise<any> }) {
    const params = await props.params;
    const slug = params.slug ? params.slug.join("/") : "home";
    const { data } = await fetchData({ slug });

    return <>{data.story && <StoryblokStory story={data.story} />}</>;
}```


<!-- Project information (URL, framework, environment, project settings) -->
URL: https://staging.marcel.fit
Framework: Next 15.1.4 with App Router
Project settings: Framework Preset 'Next.js' and notthing overriden
2

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

3

With the help of v0 I now managed to get it working. It needed some rewriting of generateStaticParams

1 Like
4

Thanks for coming back with your solution! Glad to hear v0 helped you out :smile:

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.