Remove next-view-transitions and use native View Transition API

- Remove external next-view-transitions dependency
- Use Next.js 16 native navigation and Safari 18+ native View Transition API
- Add ViewTransitionProvider for minimal wrapping with Safari 18+ detection
- Updated all Link imports from external package to next/link
- Removed link-wrapper.tsx and view-transitions-wrapper.tsx

This resolves Safari compatibility issues while maintaining transitions on modern browsers.
This commit is contained in:
2026-03-14 23:00:21 +08:00
parent efb57b691b
commit 1b495d2d2d
33 changed files with 1124 additions and 830 deletions

View File

@@ -1,9 +1,8 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import { useEffect, useState } from 'react';
export default function Template({ children }: { children: React.ReactNode }) {
const containerRef = useRef<HTMLDivElement>(null);
const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
useEffect(() => {
@@ -14,26 +13,6 @@ export default function Template({ children }: { children: React.ReactNode }) {
return () => mq.removeEventListener('change', handler);
}, []);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
if (prefersReducedMotion) {
container.style.animation = 'none';
container.style.opacity = '1';
container.style.transform = 'none';
return;
}
// Trigger animation on mount
container.style.animation = 'none';
void container.offsetHeight;
container.style.animation = 'pageEnter 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards';
}, [children, prefersReducedMotion]);
return (
<div ref={containerRef} className="page-transition">
{children}
</div>
);
// ViewTransitions handles page transitions - no additional wrapper needed
return <>{children}</>;
}