update: Use forked next-view-transitions

Hayao0819 · Jul 8, 2024 · af8094c · af8094c
1 parent ef2da6c
commit af8094c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
         "newpost": "pnpm run blogtool newpost"
     },
     "dependencies": {
+        "@hayao/next-view-transitions": "0.2.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.2.10",
         "gray-matter": "^4.0.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "@/style/global.css";
 import "@/style/prism.css";
 
+import { ViewTransitions } from "@hayao/next-view-transitions";
 import { Metadata as NextMetadata } from "next";
 import React, { ReactNode, Suspense } from "react";
 
@@ -18,9 +19,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
                 </Suspense>
             </head>
             <body className="overflow-x-hidden overscroll-y-none">
-                {/* ページ内リンクで正常に動作しない */}
-                {/*<ViewTransitions>{children}</ViewTransitions>*/}
-                {children}
+                <ViewTransitions>{children}</ViewTransitions>
             </body>
         </html>
     );

diff --git a/src/components/elements/Link.tsx b/src/components/elements/Link.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Link as ViewTransitionLink } from "@hayao/next-view-transitions";
 import classNames from "clsx";
 import { motion } from "framer-motion";
 import { default as NextLink } from "next/link";
@@ -15,7 +16,7 @@ export default function DaisyLink(props: NextLinkProps) {
 }
 
 export const Link = (props: NextLinkProps) => {
-    return <NextLink {...props} />;
+    return <ViewTransitionLink {...props} />;
 };
 
 export function AnimatedLink(props: NextLinkProps) {