next-view-transitions
next-view-transitions copied to clipboard
Published
20 hours ago •
shuding
shuding
How to use this api with next-intl navigation wrapper ?
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;
I was about to post this.
Can we expose some other function to initiate an animation manually, instead of only having router and Link
Hope someone can find a solution to this, this is a critical feature we need
