0

I'm currently facing an issue with the LinkedInBot (tool used for linkedin when you try to share one page on their platform) not accessing the dynamic URLs correctly in my Next.js application hosted on Vercel. Instead of accessing the expected URL format, the LinkedInBot is attempting to access an encoded version of the URL with route parameters enclosed in square brackets.

Normally I'm able to access the page [GET] /2023/07/como-implementar-diversidade-na-documentacao and it goes under the [year]/[month]/[slug].tsx file. It works fine, but when I try to share a link on LinkedIn it gets 404, ans in the Vercel Logs I found out that LinkedInBot tried to access [GET] /%5Byear%5D/%5Bmonth%5D/%5Bslug%5D instead.

Source code of the page: https://github.com/vtnorton/vtnorton.com/blob/main/src/pages/%5Byear%5D/%5Bmonth%5D/%5Bslug%5D.tsx

Attempts to solve the issue:

  • I have verified that the shared URL on LinkedIn contains the correct URL with dynamic values.
  • I have ensured that the logic for loading data for the dynamic pages is functioning correctly.

NextJS: 13.4.6

Vítor Norton
  • 408
  • 1
  • 6
  • 12

1 Answers1

1

These are the lines responsible for the issue. You have the same problem with all parameters using pageUrl. From the Next.js official documentation:

pathname: String - The path for current route file that comes after /pages. Therefore, basePath, locale and trailing slash (trailingSlash: true) are not included.

So it will be exactly /[year]/[month]/[slug] as we can see when inspecting your page in https://vtnorton.com/2023/07/como-implementar-diversidade-na-documentacao :

<meta property="og:url" content="https:`//vtnorton.com/[year]/[month]/[slug]">

Instead, you could use asPath:

asPath: String - The path as shown in the browser including the search params and respecting the trailingSlash configuration. basePath and locale are not included.

I made a PR with the changes: https://github.com/vtnorton/vtnorton.com/pull/38

paulogdm
  • 1,572
  • 14
  • 20