useSelectedLayoutSegment

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()

  return <p>アクティブなセグメント: {segment}</p>
}

'use client'

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

// この*クライアント*コンポーネントはブログレイアウトにインポートされます
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // `/blog/hello-world`に移動すると、選択されたレイアウトセグメントとして'hello-world'が返されます
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // リンクがアクティブかどうかでスタイルを変更
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}