Error: No selected layout segment below the current level

[TurniXXD]

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed, 05 Oct 2022 12:15:15 +0000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.43
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Brave

How are you deploying your application? (if relevant)

No response

Describe the Bug

I was following guide from Next.js Conf (Stage J) for Next.js 13, and I keep getting this error Error: No selected layout segment below the current level when trying to use useSelectedLayoutSegment hook in client component

"use client"

import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

export default function NavLink({ href, children }: React.PropsWithChildren<{ href: string }>) {
  let segment = useSelectedLayoutSegment();
  let active = href === `/${segment}`
  return <Link className={active && 'text-blue-700' || ''} href={href}>{children}</Link>
}

Expected Behavior

I can use useSelectedLayoutSegment hook in a way i believe it works in client component

Link to reproduction

https://github.com/TurniXXD/next-13

To Reproduce

• Create new Next.js 13 app with typescript
• I have enabled the experimental: { appDir: true } config
• Add tailwindcss
• Add new components and pages
• Try to use hook in client component

[stahlmanDesign]

related to https://github.com/vercel/next.js/issues/41879

[alex-marinov]

having the same error - here is the repo that reproduces the issue: https://github.com/alex-marinov/nextjs13-testapp

[alex-marinov]

I've used useSelectedLayoutSegments() as a workaround;

let layoutSegments = useSelectedLayoutSegments();
let segment = layoutSegments[0];
if (segment === undefined) segment = "";
let active = href === `/${segment}`;

[chukwumaokere]

Above suggestion works for me as well. Wonder why this bug exists... but Sam Selikoff's video didnt encounter this

[alex-marinov]

Above suggestion works for me as well. Wonder why this bug exists... but Sam Selikoff's video didn't encounter this

I had a quick look at his repo, and looks like nextjs version he is using doesn't have the update that throws error.

I've managed to find the line that throws this error; https://github.com/vercel/next.js/blob/29c5acd33b0754757e31cf724ed9b0ff83065234/packages/next/client/components/navigation.ts#L164 < perhaps should need to return null, instead of throwing error?

[github-actions[bot]]

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.