Выбранное состояние элемента навигации в следующем 13

Question

Я хочу иметь выбранное состояние для элемента навигации в следующих 13, я не мог найти способ получить какой-либо контекст на серверном компоненте, поэтому в итоге получил клиентский компонент, подобный этому

      'use client';

import Image from 'next/image';
import Styles from '../styles/header.module.css';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface MainRoute {
  name: string;
  path: string;
  index: number;
}

const mainRoutes = [
  { name: 'home', path: '/' },
  { name: 'path 2', path: '/path2' },
  { name: 'path 3', path: '/path3' },
] as MainRoute[];

export default function Header({}) {
  const path = usePathname();
  return (
    <header>
      <div className={Styles.header}>
        <h1>
          App title
        </h1>
      </div>
      <div className={Styles.header}>
        <ul id="mainNav">
          {mainRoutes.map((route, index) => (
            <li key={index}>
              <Link
                className={path === route.path ? Styles.selected : ''}
                href={route.path}
              >
                {route.name}
              </Link>{' '}
              {index !== mainRoutes.length - 1 ? <span>|</span> : ''}
            </li>
          ))}
        </ul>
      </div>
    </header>
  );
}

Это лучший способ добиться этого базового стиля? Насколько мне известно, теперь весь этот код должен быть отправлен клиенту.