Next.js 再履修②

レイアウトとページの作成

• ネストされたルーティング

新しいページの追加

/app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

ページ間の移動

<Link>

import Link from 'next/link';

          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>

Showing active links

nav-links.tsxは React フックなので クライアントコンポーネントにする

'use client';

import { usePathname } from 'next/navigation';

clsxと組み合わせてリンクがアクティブ（パスと現在のURLが一致）してたら色を変える

            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}