Enhance Next.js configuration and layout for improved performance and font loading

gokulkrishh · gokulkrishh · commit 1841eaad9ccd · 2025-10-01T20:58:21.000+05:30
- Added image formats support (AVIF, WebP) and set minimum cache TTL in next.config.ts.
- Enabled compression, disabled the powered by header, and activated React strict mode.
- Introduced experimental features for optimized package imports from Radix UI and motion.
- Updated layout.tsx to include font display settings and preconnect links for Google Fonts, enhancing loading performance.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,11 +15,15 @@ import "./globals.css"
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
+  display: "swap",
+  preload: true,
 })
 
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
+  display: "swap",
+  preload: true,
 })
 
 export const metadata: Metadata = {
@@ -85,6 +89,11 @@ export default async function RootLayout({
 
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+      </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <ThemeProvider>
           <SidebarProvider defaultOpen={defaultOpen}>
diff --git a/next.config.ts b/next.config.ts
@@ -16,6 +16,30 @@ const nextConfig: NextConfig = {
         pathname: "/**",
       },
     ],
+    formats: ["image/avif", "image/webp"],
+    minimumCacheTTL: 60,
+  },
+  compress: true,
+  poweredByHeader: false,
+  reactStrictMode: true,
+  experimental: {
+    reactCompiler: true,
+    optimizePackageImports: [
+      "@radix-ui/react-alert-dialog",
+      "@radix-ui/react-avatar",
+      "@radix-ui/react-collapsible",
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-dropdown-menu",
+      "@radix-ui/react-hover-card",
+      "@radix-ui/react-popover",
+      "@radix-ui/react-progress",
+      "@radix-ui/react-scroll-area",
+      "@radix-ui/react-select",
+      "@radix-ui/react-separator",
+      "@radix-ui/react-slot",
+      "@radix-ui/react-tooltip",
+      "motion/react",
+    ],
   },
 }
 
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "^19.1.0-rc.3",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
     "prettier": "^3.6.2",
