The issue involves CSS `:target` selector behavior with Next.js `<Link>` component.
The issue is that the CSS `:target` selector does not work when using Next.js `<Link>` component with `href` pointing to a hash. This is likely due to `window.history.pushState` usage in Next.js, which does not trigger the `:target` selector. The problem persists across multiple versions of Next.js and requires a solution that aligns with browser behavior and Next.js routing mechanisms.
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.15.0
npm: 9.5.0
Yarn: 3.4.1
pnpm: 8.6.0
Relevant packages:
next: 13.4.6-canary.7
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5
App directory (appDir: true), Routing (next/router, next/navigation, next/link)
https://github.com/tilman/nextlink-css-target-selector-bug
1.) Open the example under http://localhost:3000/ (for regular pages) Watch the div below the links wich should turn blue during clicking the links.
Use regular anchor tags: Click Link 1.) it to see that :target selector changed the style of a div Click Link 2.): Reset the styling with this link by changing the target to '#'
Use next Link tags: Click Link 3.) to see that :target selector does not change the style of a div if next/link is used Click Link 1.)/4.) again to set the blue bg Clink Link 5.) to reset the styling with this link by changing the target to '#'. Also does not reset the style if regular anchor tag (1./4.) was clicked before to set the style.
2.) Open the example under http://localhost:3000/appExample (for new app dir. Same behaviour)
While using a next/link the css :target selector is not working. Only if we use a regular tag.
The CSS :target selector should work with next/link the same way as with the <a> tag
chrome
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!