Docs: Explain why Layouts (RSCs) can't access pathname

[delbaoliveira]

• Add section explaining why pathname can't be accessed in a layout (file)
• Split pages and layouts files (to add layout-specific examples in the future)
• Clean up the existing active links example

I'll add layout-specific examples in a follow-up PR, after creating some demos.

[github-actions]

All broken links are now fixed, thank you!

[samcx]

Looks good to me!

I'm not sure you want others to as well, but could not find anything off myself.

[karlhorky]

@delbaoliveira thanks for documenting this! One of the first things that a lot of people run into when trying out the App Router.

If some examples of best practice patterns for common things could be added, that would be amazing, eg:

1. how to highlight the current page in a nav (I'm guessing with a Client Component?)

[karlhorky]

ah wait, I think you already did number 1 above ("Active Nav Links") in this PR, thanks!!

• https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#active-nav-links
• https://github.com/vercel/next.js/pull/64785/files#diff-16062e84f15d28111bf419c1e093dbb2a372d5cb06d84c4254093f863bb955b8R220

[delbaoliveira]

Hey @karlhorky 👋🏼 Nice to see you here!

Ah yes, I'll add a few more examples to the docs in the coming days. This Github issue has some good suggestions, it would be good to show how people can achieve these patterns: #43704

I'm also writing a response for that issue that goes into more detail into why.