Limit the Slugs in a Dynamic Route that will be allowed

Question

I want to make sure only the routes that actually exist as slugs in my data are rendered, and have a redirectaction specified. I have the following in a route that is under a [slug]/page.tsx file

import courses from '@/devData/courses.json'

export const dynamicParams = false

export async function generateStaticParams() {
    return courses.map(course => ({
        params: {
            title: course.title,
            rating: course.rating,
            reviews: course.reviews,
            slug: course.slug
        }
    }))
}

export default function CoursePage({ params }: {params: { slug: string, title: string, rating: number, reviews: number }}) {
    return (
        <div>
            <h1>{params.title}</h1>
            <p>Slug: {params.slug}</p>
            <p>Rating: {params.rating}</p>
            <p>Reviews: {params.reviews}</p>
        </div>
    )

}

{params.title}

Slug: {params.slug}

Rating: {params.rating}

Reviews: {params.reviews}

) }

ASittingDuck · Accepted Answer

The problem was that I was not returning an object with a "slug" property outside of "params" property

Limit the Slugs in a Dynamic Route that will be allowed

2 Replies