My component look like this

export async function getStaticProps({
  params,
}: {
  params: { bandId: number };
}) {
  const { bandId } = params;
  let band = null;
  let error = null;
  try {
    // for SSG, talk directly to db (no need to go through API)
    band = await getBandById(Number(bandId));
  } catch (e) {
    if (e instanceof Error) error = e.message;
    if (e && typeof e === "object" && "toString" in e) error = e.toString();
  }
  return { props: { band, error } };
}

export async function getStaticPaths() {
  const bands = await getBands();

  const paths = bands.map((band) => ({
    params: { bandId: band.id.toString() },
  }));
  return { paths, fallback: "blocking" };
}

export default function BandPage({
  band,
  error,
}: {
  band: Band | null;
  error: string | null;
}): React.ReactElement {
  if (error)
    return <QueryError message={`Could not retrieve band data: ${error}`} />;

...
Below here is my attempt to convert it to "app".
Im using from generateStaticParams & getMethod mentioned here : https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration


So-far

export async function generateStaticParams() {
  const band = await getBands();
  return [{ bandId: band.id.toString() }];
}

export async function getBand(params: any) {
  const { bandId } = params;
  let band = null;
  let error = null;
  try {
    // for SSG, talk directly to db (no need to go through API)
    band = await getBandById(Number(bandId));
  } catch (e) {
    if (e instanceof Error) error = e.message;
    if (e && typeof e === "object" && "toString" in e) error = e.toString();
  }
  return { band, error };
}

export default async function BandPage({ params }: any) {
  const { error, band } = await getBand(params);

  if (error)
    return <QueryError message={`Could not retrieve band data: ${error}`} />;