useSelectedLayoutSegment(s) hooks both return no data

[NuroDev]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.18.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.17.0
Relevant packages:
  next: 13.0.4
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Microsoft Edge Version 107.0.1418.56 (Official build) (arm64)

How are you deploying your application? (if relevant)

N/A

Describe the Bug

Currently when trying to use either useSelectedLayoutSegment or useSelectedLayoutSegments hooks they both return no data.

• useSelectedLayoutSegment returns null at all times
• useSelectedLayoutSegment returns an empty array

Expected Behavior

According to the docs they should be returning both either string | null & Array<string> respectively

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://stackblitz.com/edit/nextjs-zbazdc?file=app/(app)/[slug]/layout.tsx

To Reproduce

Follow (beta) Next.js documentation on how to use the hooks, primarily via creating a segment of any kind, & attempt to use the hooks in a client component or layout respectively.

[NuroDev]

Could be related to #42300

[Fredkiss3]

This is definitely a regression since in precedent versions it worked, as a workaround for now you can use usePathname as a replacement.

[balazsorban44]

This is expected, as of #42299

From the documentation:

useSelectedLayoutSegment is a hook that can only be used inside a Client Component. You can use it in a client component that is imported into a layout. It returns a string of the active segment or null if one doesn't exist.

See: https://beta.nextjs.org/docs/api-reference/use-selected-layout-segment

[abhilashlr7]

This is expected, as of #42299

From the documentation:

useSelectedLayoutSegment is a hook that can only be used inside a Client Component. You can use it in a client component that is imported into a layout. It returns a string of the active segment or null if one doesn't exist.

See: https://beta.nextjs.org/docs/api-reference/use-selected-layout-segment

I think in the repro link, the component is marked as client component and yet the values aren't displayed. The same happens in my project where a client component doesn't log the output of useSelectedLayoutSegment(); as expected but it displays null

[Fredkiss3]

@abhilashlr7 , what is said in the docs is that this hook has these constraints :

• You can't access the selected segment from within a server component
• You can't access the selected segment from a page, or directly from a layout
• You can only access the segment if useSelectedLayoutSegment or useSelectedLayoutSegments is called from a client component that is imported by a layout.
• useSelectedLayoutSegment and useSelectedLayoutSegments will return null and [] respectively when called from a segment that is at the same segment level that the layout from within it's imported

You can see more in the docs : https://beta.nextjs.org/docs/api-reference/use-selected-layout-segment#examples

[Fredkiss3]

Im my opinion, this information is very important as it can easily lead to confusion, it should be highlighted in the docs or at least made into a different section.

Kind of like how it's done on the new react beta docs :

[NuroDev]

Im my opinion, this information is very important as it can easily lead to confusion, it should be highlighted in the docs or at least made in a different section.

Agreed. This issue was less of a bug & more about (my) confusion in understanding layout segments when reading the docs & struggling to see / understand the constraints in which you can actually access layout segments.

I agree & like the idea @Fredkiss3 has shared above in making it clear & obvious with some kind of callout section pointing out a (common) pitfall when using a certain feature.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.