The Contributing guidelines say TypeScript should be leveraged for new examples, so I thought I'd convert this example over.
I also:
- Upgraded all dependencies
- Replaced the `prop-types` package with TypeScript types
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Description
According to `Next.js` useRouter documentation:
- `asPath`: The path (including the query) shown in the browser without the configured basePath or locale.
- `pathname`: Current route. That is the path of the page in /pages, the configured basePath or locale is not included.
`asPath` should not be used as the props of components. There are many cases that `asPath` not working as expected. For example:
- `asPath` is different on server-side and client-side.
- `asPath` can contains `id` and `query`.
## Suggestion
- Warning the use of `asPath` can lead to the conflict of client and server-side.
- Update `useRouter` document.
## Bug
- [x] Related issues linked using `fixes #number`
Fixes: https://github.com/vercel/next.js/issues/34144
Fixes: https://github.com/vercel/next.js/issues/34016
Fixes: https://github.com/vercel/next.js/issues/34197
updated example for [active-class-name](f00ad581a1/examples/active-class-name) to also support a `[slug].js` page that matches on `as` instead of `href` (as `href` would be `/[slug]`)
> This does not demo `[..slug].js` as this requires possible custom code for determining the slug path part for the active classname. i.e. page tree active nodes. A possible other example or another PR on this example.
Has possible information for:
* https://github.com/vercel/next.js/issues/7410
* Fix example active-class-anme: Add support for children of ActiveLink without a className.
* Update examples/active-class-name/components/ActiveLink.js
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
