### Description
The current implementation of the activeClassName example doesn't
support the `UrlObject` type for the "href" Link prop.
For example
```
<ActiveLink
activeClassName="active"
className="nav-link"
href={{
pathname: "/[slug]",
query: {
slug: "dynamic-route",
},
}}
>
Dynamic Route
</ActiveLink>
```
won't work.
### Suggestion
We can use the `resolveHref` function to handle all cases.
Co-authored-by: Sam Ko <sam@vercel.com>
## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
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>
