Install Vercel Web Analytics for Next.js

src/app/layout.tsx

@@ -1,14 +1,14 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { cookies } from "next/headers";
+import { CONSENT_COOKIE, parseConsentCookieValue } from "@/lib/cookies/consent";
 import type { Theme } from "@/lib/theme";
 import { ThemeProvider, ThemeScript } from "@/lib/theme";
-import { CONSENT_COOKIE, parseConsentCookieValue } from "@/lib/cookies/consent";
 import "./globals.css";
+import AnalyticsConsent from "@/components/analytics-consent";
+import CookieBanner from "@/components/cookie-banner";
 import Footer from "@/components/footer";
 import Navbar from "@/components/navbar";
-import CookieBanner from "@/components/cookie-banner";
-import AnalyticsConsent from "@/components/analytics-consent";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -83,7 +83,9 @@ export default async function RootLayout({
   const cookieStore = await cookies();
   const consentValue = cookieStore.get(CONSENT_COOKIE)?.value;
   const consent = parseConsentCookieValue(consentValue);
-  const storedTheme = consent?.appearance ? cookieStore.get("theme")?.value : undefined;
+  const storedTheme = consent?.appearance
+    ? cookieStore.get("theme")?.value
+    : undefined;
   const defaultTheme: Theme | undefined =
     storedTheme === "light" ||
     storedTheme === "dark" ||

src/components/analytics-consent.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { Analytics } from "@vercel/analytics/next";
+import { useEffect, useState } from "react";
 import { getConsentFromDocument } from "@/lib/cookies/consent";
 
-const isAnalyticsEnabled = () =>
-  Boolean(getConsentFromDocument()?.analytics);
+const isAnalyticsEnabled = () => Boolean(getConsentFromDocument()?.analytics);
 
 export default function AnalyticsConsent() {
   const [enabled, setEnabled] = useState(false);

src/components/cookie-banner.tsx

@@ -2,9 +2,9 @@
 
 import { useEffect, useMemo, useState } from "react";
 import {
+  type CookiePreferences,
   createConsentCookieValue,
   getConsentFromDocument,
-  type CookiePreferences,
 } from "@/lib/cookies/consent";
 
 const THEME_COOKIE = "theme";

src/lib/theme/provider.tsx

@@ -8,13 +8,13 @@ import {
   useMemo,
   useState,
 } from "react";
+import { getConsentFromDocument } from "@/lib/cookies/consent";
 import type {
   ResolvedTheme,
   Theme,
   ThemeProviderProps,
   UseThemeProps,
 } from "./types";
-import { getConsentFromDocument } from "@/lib/cookies/consent";
 
 const DEFAULT_STORAGE_KEY = "theme";
 const DEFAULT_THEME: Theme = "system";