feat(analytics): Integrate Vercel Analytics and add loader component across layouts

Author: XDukeHD

package.json

@@ -12,6 +12,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^7.1.1",
+    "@vercel/analytics": "^1.5.0",
+    "@vercel/speed-insights": "^1.2.0",
     "critters": "^0.0.23",
     "framer-motion": "^10.18.0",
     "http-proxy-middleware": "^3.0.5",

src/app/checkout/layout.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+import VercelAnalyticsLoader from "@/components/layout/VercelAnalyticsLoader";
 
 export const metadata: Metadata = {
   title: "Finalizar Compra | FireHosting",
@@ -15,6 +16,7 @@ export default function CheckoutLayout({
       <section className="section-padding">
         <div className="container-max">{children}</div>
       </section>
+      <VercelAnalyticsLoader />
     </div>
   );
 }

src/app/dashboard/app/[identifier]/layout.tsx

@@ -1,9 +1,15 @@
 "use client";
+import VercelAnalyticsLoader from "@/components/layout/VercelAnalyticsLoader";
 
 export default function ServerAppLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <>{children}</>;
+  return (
+    <>
+      {children}
+      <VercelAnalyticsLoader />
+    </>
+  );
 }

src/app/dashboard/layout.tsx

@@ -1,11 +1,17 @@
 "use client";
 import DashboardLayout from "@/components/dashboard/DashboardLayout";
 import { ReactNode } from "react";
+import VercelAnalyticsLoader from "@/components/layout/VercelAnalyticsLoader";
 
 export default function DashboardSectionLayout({
   children,
 }: {
   children: ReactNode;
 }) {
-  return <DashboardLayout>{children}</DashboardLayout>;
+  return (
+    <>
+      <DashboardLayout>{children}</DashboardLayout>
+      <VercelAnalyticsLoader />
+    </>
+  );
 }

src/app/layout.tsx

@@ -6,6 +6,7 @@ import ConsoleWarning from "@/components/layout/ConsoleWarning";
 import ConditionalLayout from "@/components/layout/ConditionalLayout";
 import ExternalScripts from "@/components/layout/ExternalScripts";
 import UtmTracker from "@/components/tracking/UtmTracker";
+import VercelAnalyticsLoader from "@/components/layout/VercelAnalyticsLoader";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -57,6 +58,7 @@ export default function RootLayout({
           <UtmTracker />
           <ConditionalLayout>{children}</ConditionalLayout>
           <ExternalScripts />
+          <VercelAnalyticsLoader />
         </AuthProvider>
       </body>
     </html>

src/app/vercel-analytics.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { Analytics } from "@vercel/analytics/react";
+
+export function VercelAnalytics() {
+  return (
+    <>
+      <SpeedInsights />
+      <Analytics />
+    </>
+  );
+} 

src/components/layout/VercelAnalyticsLoader.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const VercelAnalytics = dynamic(() => 
+  import("@/app/vercel-analytics").then((mod) => mod.VercelAnalytics), 
+  { ssr: false }
+);
+
+export default function VercelAnalyticsLoader() {
+  return <VercelAnalytics />;
+}