nextjs force incompatible "href" and "as" attributes in next/Link

156 Views Asked by At

I have the following routes:

/categories/[categoryId]
/products/[productId]
/content/[contentId]

and I want to have SEO friendly URLs for them as follows:

https://example.com/category-name-c12345 - where c in c12345 is a constant prefix
https://example.com/product-name-p12345 - where p in p12345 is a constant prefix
https://example.com/content-page-name-s12345 - where s in s12345 is a constant prefix

I tried to use next/Link component "href" and "as" attributes:

<Link
    href={/categories/[categoryId]}
    as={/category-name-c12345}
>
    <a>category</a>
</Link>

but I get an error that the "href" and the "as" attributes are incompatible.

I found the the following documentation: https://nextjs.org/docs/messages/incompatible-href-as which makes it clear as to why they are incompatible but the problem is that the requirements come from SEO experts who claim that the structure is a world standard, so the question here is:

Is it possible that I cannot find the proper documentation for nextjs, which shows how to do the routing that I need? Or the case is that nextjs is not capable of handling this type of routing?

0

There are 0 best solutions below