Actually, I'm not sure is this a bug or mine project issue.
I use Link from next-intl, and component do not accept strings except '/' and 'pathnames'
The interface from error hint is:
(property) href: "/" | "/pathnames" | ({
pathname: "/";
} & Omit<UrlObject, "pathname">) | ({
pathname: "/pathnames";
} & Omit<UrlObject, "pathname">)
I have no idea why it accept only these two string. While I change to Next.js's component, it works without error.
// page.tsx
'use client';
import { Link, usePathname } from '@/i18nnavigation';
export default function Nav({ links }: NavProps) {
const pathname = usePathname();
const isCurrentPath = (path: string | undefined) => (pathname === path ? 'default' : 'ghost');
return (
<Link
href={{
pathname: '/users',
params: { userId: '5' },
}}
className="flex">
<link.icon size={24} />
<span className="ml-2">{link.title}</span>
</Link>
);
}
// i18nnavigation.ts
import { createLocalizedPathnamesNavigation } from 'next-intl/navigation';
import { locales, pathnames, localePrefix } from './i18nconfig';
export const { Link, redirect, usePathname, useRouter } = createLocalizedPathnamesNavigation({
locales,
pathnames,
localePrefix,
});
Expect no error or type hint and correctly pass '/user' as prop to href in