https://github.com/joulev/get-pathname-in-server-components
A small Next.js App Router app where the navbar, with active state, is rendered entirely in server components. No, don't ask me why this works
https://github.com/joulev/get-pathname-in-server-components
Last synced: about 1 month ago
JSON representation
A small Next.js App Router app where the navbar, with active state, is rendered entirely in server components. No, don't ask me why this works
- Host: GitHub
- URL: https://github.com/joulev/get-pathname-in-server-components
- Owner: joulev
- Created: 2024-05-26T08:28:56.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-26T08:52:26.000Z (about 2 years ago)
- Last Synced: 2025-02-24T21:43:10.934Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://get-pathname-in-server-components.vercel.app
- Size: 21.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A small Next.js App Router app where the navbar, with active state, is rendered entirely on the server.
Credit to [this Next.js PR](https://github.com/vercel/next.js/pull/65922).
### What are the drawbacks?
Firstly, this only works in prod mode. Secondly, it requires completely disabling the router cache.
And there could be many edge cases. I don't know, I am not knowledgeable enough on the internal Next.js logic to make any statements regarding this issue.
### Should I use this to make my navbar?
Oh god no. Just
```jsx
"use client";
export function NavbarItem({ href, children }) {
const pathname = usePathname()
const isActive = pathname === href;
return ...;
}
```
```jsx
function Navbar() {
return items.map((item) => (
{item.name}
));
}
```
You don't want to use internal undocumented APIs just for something as simple as this.
### How is this even possible?
Same question, man. Same question.