Setup:
URL Structure: /c/[name]/p/[code]
name = the name of the product
code = the code of the product

Background:
Our backend gives me these urls from the data they have, since we are migrating an old JSP application to a NextJs application, we cannot make drastic changes to the url structure. so we are stuck with this.

Problem:
Currently I only need the code, the be able to retrieve the correct data and render the page accordingly. So this makes it possible for different urls with the other codes to work. for example:
url 1: /c/testProduct/p/1
url 2: /c/differentName/p/1

url 1 and url2, will give back exactly the same page, since I am only able to use the code to fetch the data.

The solution:
On the current webshop, they replace the url, whenever a different code is loaded with the correct url.
so let's say with the same example as above, I try to enter url 2 it will automatically change to the url of url 1.

I'd like to have a similar solution as they currently use without using any middlewares.
I have my current page.tsx component below with some psuedocode of how I have it working in my head...
if anyone has an idea of how to achieve this, if it's even possible. I would be glad to know it!

export default async function Page({
  params: { code, locale },
}: {
  params: { code: string; locale: string };
}) {
  const queryClient = getQueryClient();
  const product = await queryClient.fetchQuery({
    queryKey: productKeys.detail(code, locale),
    queryFn: () => fetchProductDetail(code, locale),
  });
  const dehydratedState = dehydrate(queryClient);

  if (!product) notFound();

  // If it is found
  // Check if the current pathname equals that of the product.response. 
  // if not, redirect to the correct pathname

  return (
    // Page content
  );
}