use my answer, bard is wrong lol

if you want cityName then it will be

// app/doctor-in/[cityName]/page.tsx

export async function generateStaticParams() {
  const cities = await getCities() // get the cities from database
 
  return cities.map((city) => ({
    cityName: city.name,
  }))
}

Does this generate a URL like domain.com/doctor-in-${cityName}?

no need to combine with the middleware

I just wonder that it seemed possible to simply send multiple props with pages router (like below).
And now with app router it's not easily possible anymore?

import { AppRouter, Routes, Route } from 'next/router';
import { getStaticProps } from 'next';

const DoctorInCityPage = ({ cityName, additionalData }) => (
  <div>
    <h1>Doc in {cityName}</h1>
    {additionalData && <p>Additional data: {additionalData.toString()}</p>}
  </div>
);

export async function getStaticProps({ params }) {
  const cityName = params.pathname.replace('/doctor-in-', '');
  // Fetch additional data for the city
  const additionalData = await fetchAdditionalData(cityName);

  return {
    props: {
      cityName,
      additionalData,
    },
  };
}

const App = () => (
  <AppRouter>
    <Routes>
      <Route path="/doctor-in-{cityName}" element={<DoctorInCityPage />} />
    </Routes>
  </AppRouter>
);

export default App;

is this code from bard? never seem next/router render the route like this

you fetch the additionalData in the component

yes, it's from bard.
but the point is that you could send multiple props using getStaticProps (pages router) but not with getStaticParams (app router) anymore.
and there seems nothing which replaces this feature in app router.

however, there's certainly another way to do it in app router.

because we don't need to pass to it anymore

we just fetch directly in the server component

of course, you could do that.
would just be cool to have the city name passed to the pages correctly so that I can use it to fetch the remaining data.😇

like this

export default async function locationPage({params}) {

  const additionalData = await fetchAdditionalData(params.cityName);

    return <>
        <h1>Doc in {params.cityName}</h1>
    </>
}

you were fetching inside getStaticProps but with app router we fetch inside the server component

with this app/doctor-in/[cityName]/page.tsx path you get the cityName in the params object

then the middleware will rewrite the url for you

domain/doctor-in-{cityName} -> domain/doctor-in/{cityName}

I see.
Now the point is that I still want to get the URL like domain.com/doctor-in-${cityName} (which works when I construct the pathname using generateStaticParams (instead of just returning the cityName).
And I'm not sure if I like the idea of rewriting the path (as in your middleware), because from what I understand the middleware will rewrite the URL only when the page gets visited.
Which means under the hood the URL is still something like domain.com/doctor-in/${cityName} - which is the URL communicated to search engines.
But the URL I want to communicate to search engines is domain.com/doctor-in-${cityName}

you generate the urls in sitemap

and you can also submit it in search console

google will crawl your site with your sitemap you submitted

or you can do this lol

// app/{doctorInCityName}/page.tsx

export default async function locationPage({params}) {
  const cityName = params.doctorInCityName.replace('/doctor-in-', '');
  const additionalData = await fetchAdditionalData(cityName);

    return <>
        <h1>Doc in {cityName}</h1>
    </>
}

then you dont need to rewrite the url in middleware

what about citynames with spaces and non-chars like: Naumburg (saale) & Neuburg an der Donau?

you can just retrieve the cityName from the params if you ONLY need the cityName from doctor-in-${cityName}

ideally you can retrieve the label of the cityName id from the database

so only the id is displayed in the URL, then you can retrieve the labels of the id in the Pages

so /doctor-in-naumburgsaale will display Naumburg (saale) because when you find it in the database for id === naumburgsaale, it will return a label which is "Naumburg (saale)"

so I would need to generate the "URL-safe" version (which you call label?) before-hand in the DB?

url-safe version is what i'd call the id

yeah

you can use slug for this to generate the url-safe version

Okay, thank you.
Need some time to try the different ways.😇

cool, let us know which approach you ended up using!