Error: No selected layout segment below the current level

Verify canary release

• 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

[alex-marinov]

I’ve used useSelectedLayoutSegments() as a workaround;

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

[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.