feat: add next-view-transitions

hendraaagil · May 30, 2024 · 45ef0d1 · 45ef0d1
1 parent 1a2bd58
commit 45ef0d1
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "next": "14.2.3",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.3.0",
+    "next-view-transitions": "^0.2.0",
     "plaiceholder": "^3.0.0",
     "react": "^18.3.1",
     "react-countup": "^6.5.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import {
   Gabarito as FontSans,
   JetBrains_Mono as FontMono,
 } from 'next/font/google'
+import { ViewTransitions } from 'next-view-transitions'
 import { generateSeoMeta } from '@/lib/seo'
 import { cn } from '@/lib/utils'
 
@@ -40,35 +41,37 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <head />
-      <body
-        className={cn(
-          'min-h-screen overflow-y-scroll font-sans antialiased bg-color text-color',
-          fontSans.variable,
-          fontMono.variable,
-        )}
-      >
-        <main className="mx-auto flex max-w-5xl">
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            enableSystem
-            disableTransitionOnChange
-          >
-            <Navigation />
-            {children}
-          </ThemeProvider>
-        </main>
-        {process.env.NODE_ENV === 'production' && (
-          <Script
-            data-website-id="d7044884-6f55-4a16-8344-9221c0e82832"
-            src="https://analytics.hendraaagil.dev/script.js"
-            async
-            defer
-          />
-        )}
-      </body>
-    </html>
+    <ViewTransitions>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body
+          className={cn(
+            'min-h-screen overflow-y-scroll font-sans antialiased bg-color text-color',
+            fontSans.variable,
+            fontMono.variable,
+          )}
+        >
+          <main className="mx-auto flex max-w-5xl">
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="dark"
+              enableSystem
+              disableTransitionOnChange
+            >
+              <Navigation />
+              {children}
+            </ThemeProvider>
+          </main>
+          {process.env.NODE_ENV === 'production' && (
+            <Script
+              data-website-id="d7044884-6f55-4a16-8344-9221c0e82832"
+              src="https://analytics.hendraaagil.dev/script.js"
+              async
+              defer
+            />
+          )}
+        </body>
+      </html>
+    </ViewTransitions>
   )
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import { Link } from 'next-view-transitions'
 import { Heading } from '@/components/ui'
 import { PageContainer } from '@/components/layout'
 

diff --git a/src/components/blog/card.tsx b/src/components/blog/card.tsx
@@ -1,6 +1,6 @@
 import type { Post } from 'contentlayer/generated'
 
-import Link from 'next/link'
+import { Link } from 'next-view-transitions'
 import { ChevronRight } from 'lucide-react'
 
 import { Heading, ImageBlur, headingVariants } from '@/components/ui'

diff --git a/src/components/home/section-container.tsx b/src/components/home/section-container.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'next/link'
+import { Link } from 'next-view-transitions'
 import { ChevronRight } from 'lucide-react'
 
 import { Heading } from '@/components/ui'

diff --git a/src/components/layout/navigation/link.tsx b/src/components/layout/navigation/link.tsx
@@ -1,5 +1,7 @@
+import type { LinkProps } from 'next/link'
+
 import React from 'react'
-import Link, { type LinkProps } from 'next/link'
+import { Link } from 'next-view-transitions'
 
 import { cn } from '@/lib/utils'
 

diff --git a/src/components/project/card.tsx b/src/components/project/card.tsx
@@ -1,6 +1,6 @@
 import type { Project } from 'contentlayer/generated'
 
-import Link from 'next/link'
+import { Link } from 'next-view-transitions'
 import { ChevronRight } from 'lucide-react'
 import { Heading, ImageBlur, headingVariants } from '@/components/ui'