I build landing pages for my directory, using generateStaticParams.

export const generateStaticParams = async () => {
    const nonEmptyCitiesData = Object.entries(await getNonEmptyHpData())
    const params = [];
  
    for (const [cityName, plzArray] of nonEmptyCitiesData) {
        params.push({ cityName: cityName });
    }
    return params;
  };

Then I use a middleware to transform them into (somewhat) slugified URLs.
Because I believe that URLs like https://www.doc-gemeinschaft.de/doc-in-Aalen are more SEO-friendly than https://www.doc-gemeinschaft.de/doc-in/Aalen!?

export function middleware(request) {
    if (request.nextUrl.pathname.includes("/doc-in-")) {
        const cityName = request.nextUrl.pathname.split("/doc-in-").at(-1);
        return NextResponse.rewrite(new URL(`/doc-in/${cityName}`, request.url))
    }
}

Currently I'm getting the cityName from the {params} in the server component of the landing page:

export default async function locationPage({params}) {
    const decodedCityName = decodeURIComponent(params.cityName)
    {/* ... */}

    return <>
        <h1>doc in {decodedCityName}</h1>
        {/* ... */}
    </>
}

The problem is that some of the URLs include spaces or other characters (because these characters are part of the city names).
E.g: https://www.doc-gemeinschaft.de/doc-in-Annweiler%20am%20Trifels (hint: %20 = space character)

This approach currently works because I'm currently receiving the cityName as URL param.
But it only works because I get the exact city name from the params inside the component, which I can then use to find the respective database entry by city name.

## But how can I still get the right city/cities when I eventually use slugified/SEO-friendly URLs?