Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: clarify usePathname usage as client hook. #51146

Merged
merged 4 commits into from
Jun 12, 2023
Merged

docs: clarify usePathname usage as client hook. #51146

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2797af
docs: clarify `usePathname` usage as client hook.
leerob Jun 12, 2023
608e367
Merge branch 'canary' into usepathname-docs
delbaoliveira Jun 12, 2023
63be651
Update docs/02-app/02-api-reference/04-functions/use-pathname.mdx
delbaoliveira Jun 12, 2023
98159bd
Merge branch 'canary' into usepathname-docs
kodiakhq[bot] Jun 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/02-app/02-api-reference/04-functions/use-pathname.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,13 @@ export default function ExampleClientComponent() {
}
```

`usePathname` intentionally requires using a [Client Component](/docs/getting-started/react-essentials). It's important to note Client Components are not a de-optimization. They are an integral part of the [Server Components](/docs/getting-started/react-essentials) architecture.

For example, a Client Component with `usePathname` will be rendered into HTML on the initial page load. When navigating to a new route, this component does not need to be refetched. Instead, the component can be downloaded once (in the client JavaScript bundle) and update what it renders based on the current state.
delbaoliveira marked this conversation as resolved.
Show resolved Hide resolved

> **Good to know:**
>
> - `usePathname` is a [Client Component](/docs/getting-started/react-essentials) hook and is **not supported** in [Server Components](/docs/getting-started/react-essentials).
> - Reading the current URL from a [Server Component](/docs/getting-started/react-essentials) is not supported. This design is intentional to support layout state being preserved across page navigations.
> - Compatibility mode:
> - `usePathname` can return `null` when a [fallback route](/docs/pages/api-reference/functions/get-static-paths#fallback-true) is being rendered or when a `pages` directory page has been [automatically statically optimized](/docs/pages/building-your-application/rendering/automatic-static-optimization) by Next.js and the router is not ready.
> - Next.js will automatically update your types if it detects both an `app` and `pages` directory in your project.
Expand Down