Enable view transitions

max-programming · max-programming · commit ac554e559cfd · 2025-08-03T07:37:21.000Z
diff --git a/next.config.mjs b/next.config.mjs
@@ -3,6 +3,9 @@ import './src/env.mjs';
 /**@type {import('next').NextConfig}*/
 const config = {
   reactStrictMode: true,
+  experimental: {
+    viewTransition: true
+  },
   async redirects() {
     return [
       {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import '@/styles/globals.css';
 import Script from 'next/script';
 import type { Metadata, Viewport } from 'next';
 import { Space_Grotesk } from 'next/font/google';
+import { unstable_ViewTransition as ViewTransition } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { SessionProvider } from 'next-auth/react';
 import { Footer } from '@/components/footer';
@@ -19,19 +20,21 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
   return (
     <html className={spaceGrotesk.variable}>
       <body className="font-sans font-normal bg-hacktoberfest-dark-green">
-        {children}
-        <Footer />
-        <SessionProvider>
-          <ReportModal />
-        </SessionProvider>
-        <Toaster position="bottom-right" />
-        {env.NEXT_PUBLIC_ANALYTICS_WEBSITE_ID && (
-          <Script
-            src="https://cloud.umami.is/script.js"
-            data-website-id={env.NEXT_PUBLIC_ANALYTICS_WEBSITE_ID}
-            strategy="lazyOnload"
-          />
-        )}
+        <ViewTransition>
+          {children}
+          <Footer />
+          <SessionProvider>
+            <ReportModal />
+          </SessionProvider>
+          <Toaster position="bottom-right" />
+          {env.NEXT_PUBLIC_ANALYTICS_WEBSITE_ID && (
+            <Script
+              src="https://cloud.umami.is/script.js"
+              data-website-id={env.NEXT_PUBLIC_ANALYTICS_WEBSITE_ID}
+              strategy="lazyOnload"
+            />
+          )}
+        </ViewTransition>
       </body>
     </html>
   );
