shuding/next-view-transitions
View on GitHubHow to use this api with next-intl navigation wrapper ?
Open
#38 opened on Oct 5, 2024
help wantedquestion
Repository metrics
- Stars
- (2,388 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
I have this wrapper that performs localization for my app
navigation.ts
import { createSharedPathnamesNavigation } from 'next-intl/navigation';
import { SUPPORTED_LANGUAGES } from './constants/language';
// Always use these localized component, they provides drop-in replacements for common Next.js
// navigation APIs that automatically handle the user locale behind the scenes.
// For example instead of <Link href='locale/path' /> we just pass the path <Link href='/path' />
export const { Link, redirect, usePathname, useRouter, permanentRedirect } =
createSharedPathnamesNavigation({
locales: [...SUPPORTED_LANGUAGES],
});
i want to use transition along with this to override the Link and useRouter, can you please guide on how to achieve this ?
This is my layout i am trying with both
layout.tsx
...
<ViewTransitions>
<LocaleProvider>
<body className="flex h-svh flex-col scroll-smooth antialiased">
{children}
</body>
</LocaleProvider>
</ViewTransitions>
...
To use the link i am importting from navigation file above
component.tsx
'use client';
import { ComponentProps } from 'react';
import { Link } from '@/navigation';
interface Props extends ComponentProps<typeof Link> {
href: string;
}
const LinkWithParams = ({ href, children, ...props }: Props) => {
return (
<Link href={{ pathname: href, ... }} {...props}>
{children}
</Link>
);
};
export default LinkWithParams;