Updated/Migrated the active-class-name example to the App router
This PR contains the Following Changes.
Pages folder Converted into App Folder.
Updated file Structure according to the App Router convention
Updated ActiveLink Component as per App router.
---------
Co-authored-by: samcx <sam@vercel.com>
### 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
* 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>
Hemanshu Upadhyay