chore: integrate web vitals

.gitignore

@@ -44,3 +44,4 @@ next-env.d.ts
 !.dev.vars.example
 !.env.example
 /.pnpm-store
+.lighthouse/

Dockerfile

@@ -1,13 +1,11 @@
-FROM node:20-alpine AS deps
-RUN corepack enable && corepack prepare pnpm@9 --activate
+FROM oven/bun:1-alpine AS deps
 WORKDIR /app
 
-COPY package.json pnpm-lock.yaml ./
+COPY package.json bun.lock ./
 
-RUN pnpm install --frozen-lockfile
+RUN bun install --frozen-lockfile
 
-FROM node:20-alpine AS builder
-RUN corepack enable && corepack prepare pnpm@9 --activate
+FROM oven/bun:1-alpine AS builder
 WORKDIR /app
 
 COPY --from=deps /app/node_modules ./node_modules
@@ -16,9 +14,9 @@ COPY . .
 
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV DOCKER_BUILD=true
-RUN pnpm build
+RUN bun run build
 
-FROM node:20-alpine AS runner
+FROM oven/bun:1-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -38,4 +36,4 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
 
-CMD ["node", "server.js"]
+CMD ["bun", "server.js"]

_components/web-vitals.js

@@ -0,0 +1,8 @@
+"use client";
+import { useReportWebVitals } from "next/web-vitals";
+import { logWebVitals } from "@/lib/utils";
+
+export const WebVitals = () => {
+  useReportWebVitals(logWebVitals);
+  return <div></div>;
+};

app/layout.tsx

@@ -5,6 +5,7 @@ import { Header } from "@/components/layout/header";
 import { Footer } from "@/components/layout/footer";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { ToastProvider } from "@/components/ui/toast-provider";
+import { WebVitals } from "@/_components/web-vitals";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -35,7 +36,8 @@ export default function RootLayout({
         </div>
         <CartDrawer />
         <ToastProvider />
+        {process.env.NODE_ENV === "production" ? null : <WebVitals />}
       </body>
     </html>
   );
-}
+}

lib/utils.ts

@@ -55,3 +55,8 @@ export function debounce<T extends (...args: never[]) => unknown>(
     timeout = setTimeout(() => func(...args), wait);
   };
 }
+
+// eslint-disable-next-line
+export const logWebVitals = (metric: any) => {
+  console.log(metric);
+};