Next.js Discord

Discord Forum

dynamicParams = false not working correctly

Unanswered
Red-faced Cormorant posted this in #help-forum
Open in Discord
Red-faced CormorantOP
Hello,

been trying to implement ISR to my dynamic routes recently, and I've noticed 2 things.
first, with dynamicParams = false, my not-found.jsx file in the dynamic page is skipped and only not-found.jsx directly in the /app folder seems to catch it.
second, the mentioned behaivor is only working in dev and not in prod.
import LoadMore from "@/components/Posts/LoadMore";
import { fetchCategories, fetchPosts } from "@/lib/data";

import Card from "@/components/Card";

export async function generateStaticParams() {
    const categories = await fetchCategories();

    return categories?.map((category) => ({
        category: String(category.id),
    }));
}
export default async function Category({ params, searchParams }) {
    const { category } = await params;
    const { query } = await searchParams;
    const limit = 6;

    const data = await fetchPosts(1, category, limit);

    return (
        <>
            <section className="h-full flex flex-col  gap-2 scrollable">
                {data?.length ? (
                    data?.map((item) => (
                        <Card
                            key={item.uuid}
                            type="post"
                            data={item}
                            direction="horizontal"
                        />
                    ))
                ) : (
                    <div className="w-full h-full flex items-center justify-center text-xl">
                        No Posts Found
                    </div>
                )}
            </section>
            {data?.length >= limit && <LoadMore category={category} limit={limit} />}
        </>
    );
}


structure-
/app/posts/[categories]
/app/posts/not-found.jsx

9 Replies

@joulev i think it should be app/posts/[categories]/not-found.jsx and not app/posts/not-found.jsx
Red-faced CormorantOP
I've tried all levels of nesting and only /app/not-found seems to have caught it, I've seen a lot of GitHub issues mentioning these exact pain points, however they were quite old. Was hoping there was a fix
@Red-faced Cormorant I've tried all levels of nesting and only /app/not-found seems to have caught it, I've seen a lot of GitHub issues mentioning these exact pain points, however they were quite old. Was hoping there was a fix
Oh wait, right, only explicit notFound() calls can trigger inner not-found.tsx, I forgot. All implicit 404 are the global 404, only triggerable by the root not-found.tsx
Red-faced CormorantOP
I see, well that's one issue clarified, thanks!
Do you by chance also know why it might not work in prod but works in dev?
This one I have no clue, sorry…

To fix your issue, you can remove the dynamicParams export and instead check the slug and explicitly call notFound() inside your page component.
Red-faced CormorantOP
Right, that is a workaround I'm currently using, but it does require me to make a fetch request for categories just to check them against my slug
You can use React.cache to dedupe the call, then although you run it twice in generateStaticParams and in the page component, it is actually only executed once.

Then you just call the same thing that you use inside generateStaticParams.
Red-faced CormorantOP
I see, will check it out, thanks