In next.js v13,

Why is there a console error when trying to open dynamic pages through a Link component?
If I remove rewrite rule and rename Link's href and as properties to exact page file names, it works fine without errors. But I must use rewrite rule, how to fix it?

Link implementation:

import Link from 'next/link'
// ...

<Link 
  legacyBehavior
  href="/recipe/[slug]"
  as="/recipe/food-for-two-c14bbbf2-6182-17eb-a46b-0212ac120026"
  title="Food for two">
  {children}
</Link>

next.config.js config:

const nextConfig = {
    rewrites() {
        return [
            {
                source: '/recipe/:slug*',
                destination: '/recipes/:slug*'
            }
        ]
    }
    ....
}

Error:

- GET http://localhost:3000/_next/static/chunks/pages/recipe/%5Bslug%5D.js net::ERR_ABORTED 404 (Not Found)