const navigation = [
    { name: 'Dashboard', href: '/dashboard', icon: Squares2X2Icon, current: true },
    { name: 'Orders', href: '/orders', icon: UsersIcon, current: false },
    { name: 'Products', href: '/products', icon: FolderIcon, current: false },
]

function classNames(...classes) {
    return classes.filter(Boolean).join(' ')
}

const Navigation = () => {
    const router = useRouter();
    return (
        <>
            {navigation.map((item) => {
               const isCurrent = router.pathname === item.href
                return <a
                    key={item.name}
                    href={item.href}
                    className={classNames(
                        isCurrent
                            ? 'bg-gray-100 text-gray-900'
                            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
                        'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
                    )}
                >
                    <item.icon
                        className={classNames(
                            isCurrent
                                ? 'text-gray-500'
                                : 'text-gray-400 group-hover:text-gray-500',
                            'mr-4 flex-shrink-0 h-6 w-6'
                        )}
                        aria-hidden="true"
                    />
                    {item.name}
                </a>
            })}
        </>
    )
}

export default Navigation

通过next/router获取当前页面路径的更好方法
const router = useRouter();
有了它，你可以做一个条件，像下面，并检测什么是当前页面
const isCurrent = router.pathname === item.href