From 3e7066170e6c8d3a0b5462721f393b4301f88839 Mon Sep 17 00:00:00 2001
From: alexander-sei <alexander@seifdn.org>
Date: Sat, 8 Nov 2025 16:59:25 +0100
Subject: [PATCH] Add more optimizations

---
 app/globals.css             | 43 +++++++++++-------
 content/evm/evm-hardhat.mdx |  1 +
 next.config.mjs             | 90 ++++++++++++++++++++++++++++++++++---
 postcss.config.mjs          | 21 ++++++++-
 4 files changed, 134 insertions(+), 21 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 8c499eb1..22cb20a0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -119,6 +119,19 @@ aside,
 	contain: layout style paint;
 }
 
+/* Performance: use will-change sparingly and only on interactive elements */
+.nextra-nav-container,
+aside {
+	will-change: auto;
+}
+
+/* Performance: GPU acceleration for smooth transforms */
+.nextra-callout,
+.nextra-search-results {
+	transform: translateZ(0);
+	backface-visibility: hidden;
+}
+
 :root,
 .light,
 .light-theme {
@@ -306,72 +319,72 @@ aside,
 }
 
 /* Info callout (blue) */
-.nextra-callout.x\\:border-blue-200 {
+.nextra-callout.nx-border-blue-200 {
 	--callout-code-bg: rgba(59, 130, 246, 0.1);
 	border-color: rgba(59, 130, 246, 0.35) !important;
 	color: rgba(30, 58, 138, 0.88) !important;
 }
 
-.dark .nextra-callout.x\\:border-blue-200 {
+.dark .nextra-callout.nx-border-blue-200 {
 	--callout-code-bg: rgba(147, 197, 253, 0.12);
 	border-color: rgba(147, 197, 253, 0.5) !important;
 	color: rgba(224, 242, 254, 0.96) !important;
 }
 
-.dark .nextra-callout.x\\:border-blue-200 svg {
+.dark .nextra-callout.nx-border-blue-200 svg {
 	color: rgba(147, 197, 253, 0.92) !important;
 }
 
 /* Warning callout (yellow) */
-.nextra-callout.x\\:border-yellow-100,
-.nextra-callout.x\\:border-yellow-200 {
+.nextra-callout.nx-border-yellow-100,
+.nextra-callout.nx-border-yellow-200 {
 	--callout-code-bg: rgba(234, 179, 8, 0.1);
 	border-color: rgba(234, 179, 8, 0.42) !important;
 	color: rgba(113, 63, 18, 0.85) !important;
 }
 
-.dark .nextra-callout.x\\:border-yellow-100,
-.dark .nextra-callout.x\\:border-yellow-200 {
+.dark .nextra-callout.nx-border-yellow-100,
+.dark .nextra-callout.nx-border-yellow-200 {
 	--callout-code-bg: rgba(253, 224, 71, 0.12);
 	border-color: rgba(253, 224, 71, 0.55) !important;
 	color: rgba(254, 249, 195, 0.96) !important;
 }
 
-.dark .nextra-callout.x\\:border-yellow-100 svg,
-.dark .nextra-callout.x\\:border-yellow-200 svg {
+.dark .nextra-callout.nx-border-yellow-100 svg,
+.dark .nextra-callout.nx-border-yellow-200 svg {
 	color: rgba(253, 224, 71, 0.92) !important;
 }
 
 /* Error callout (red) */
-.nextra-callout.x\\:border-red-200 {
+.nextra-callout.nx-border-red-200 {
 	--callout-code-bg: rgba(239, 68, 68, 0.1);
 	border-color: rgba(239, 68, 68, 0.35) !important;
 	color: rgba(127, 29, 29, 0.88) !important;
 }
 
-.dark .nextra-callout.x\\:border-red-200 {
+.dark .nextra-callout.nx-border-red-200 {
 	--callout-code-bg: rgba(252, 165, 165, 0.12);
 	border-color: rgba(252, 165, 165, 0.5) !important;
 	color: rgba(254, 226, 226, 0.96) !important;
 }
 
-.dark .nextra-callout.x\\:border-red-200 svg {
+.dark .nextra-callout.nx-border-red-200 svg {
 	color: rgba(252, 165, 165, 0.92) !important;
 }
 
 /* Default/orange callout */
-.nextra-callout.x\\:border-orange-100 {
+.nextra-callout.nx-border-orange-100 {
 	--callout-code-bg: rgba(234, 88, 12, 0.1);
 	border-color: rgba(234, 88, 12, 0.35) !important;
 	color: rgba(124, 45, 18, 0.85) !important;
 }
 
-.dark .nextra-callout.x\\:border-orange-100 {
+.dark .nextra-callout.nx-border-orange-100 {
 	--callout-code-bg: rgba(253, 186, 116, 0.12);
 	border-color: rgba(253, 186, 116, 0.45) !important;
 	color: rgba(254, 237, 213, 0.96) !important;
 }
 
-.dark .nextra-callout.x\\:border-orange-100 svg {
+.dark .nextra-callout.nx-border-orange-100 svg {
 	color: rgba(253, 186, 116, 0.92) !important;
 }
diff --git a/content/evm/evm-hardhat.mdx b/content/evm/evm-hardhat.mdx
index 6f8f3268..2eccde02 100644
--- a/content/evm/evm-hardhat.mdx
+++ b/content/evm/evm-hardhat.mdx
@@ -14,6 +14,7 @@ This tutorial will guide you through setting up Hardhat for Sei EVM development
 <Callout emoji="🚀">
 
 **Deploy to Testnet First**
+
 It is <strong>highly recommended</strong> that you deploy to <em>testnet (atlantic-2)</em> first and verify everything works as expected before committing to mainnet. Doing so helps you catch bugs early, avoid unnecessary gas costs, and keep your users safe.
 
 </Callout>
diff --git a/next.config.mjs b/next.config.mjs
index 279c6944..5fdb8120 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -20,15 +20,26 @@ export default withNextra({
 	productionBrowserSourceMaps: false,
 	compress: true,
 	turbopack: {},
+	poweredByHeader: false,
+	reactStrictMode: true,
 	experimental: {
-		optimizePackageImports: ['@tabler/icons-react', '@radix-ui/themes', 'sonner', 'viem']
+		optimizePackageImports: ['@tabler/icons-react', '@radix-ui/themes', 'sonner', 'viem', 'nextra-theme-docs'],
+		webpackBuildWorker: true,
+		parallelServerCompiles: true,
+		parallelServerBuildTraces: true
 	},
 	compiler: {
 		removeConsole: process.env.NODE_ENV === 'production',
 		reactRemoveProperties: process.env.NODE_ENV === 'production' ? { properties: ['^data-test$', '^data-testid$', '^data-cy$'] } : false
 	},
+	modularizeImports: {
+		'@tabler/icons-react': {
+			transform: '@tabler/icons-react/dist/esm/icons/{{member}}'
+		}
+	},
 	images: {
 		unoptimized: false,
+		formats: ['image/avif', 'image/webp'],
 		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
 		remotePatterns: [
 			{
@@ -48,21 +59,90 @@ export default withNextra({
 			}
 		]
 	},
+	webpack: (config, { dev, isServer }) => {
+		// Production optimizations
+		if (!dev) {
+			config.optimization = {
+				...config.optimization,
+				moduleIds: 'deterministic',
+				minimize: true,
+				usedExports: true,
+				sideEffects: true,
+				concatenateModules: true,
+				splitChunks: {
+					chunks: 'all',
+					cacheGroups: {
+						default: false,
+						vendors: false,
+						// Framework chunk for React/Next.js
+						framework: {
+							name: 'framework',
+							chunks: 'all',
+							test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|use-sync-external-store)[\\/]/,
+							priority: 40,
+							enforce: true
+						},
+						// Nextra and theme
+						nextra: {
+							name: 'nextra',
+							chunks: 'all',
+							test: /[\\/]node_modules[\\/](nextra|nextra-theme-docs)[\\/]/,
+							priority: 35,
+							enforce: true
+						},
+						// UI libraries
+						ui: {
+							name: 'ui',
+							chunks: 'all',
+							test: /[\\/]node_modules[\\/](@radix-ui|sonner)[\\/]/,
+							priority: 30,
+							enforce: true
+						},
+						// Icons
+						icons: {
+							name: 'icons',
+							chunks: 'all',
+							test: /[\\/]node_modules[\\/]@tabler[\\/]icons-react[\\/]/,
+							priority: 25,
+							enforce: true
+						},
+						// Common chunks
+						commons: {
+							name: 'commons',
+							minChunks: 2,
+							priority: 20
+						}
+					},
+					maxInitialRequests: 25,
+					minSize: 20000
+				}
+			};
+		}
+
+		return config;
+	},
 	async headers() {
 		return [
 			{
 				source: '/_next/static/css/(.*)',
 				headers: [
-					{ key: 'Cache-Control', value: 'public, max-age=3600, immutable' },
-					{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=3600, immutable' },
+					{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
+					{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=31536000, immutable' },
 					{ key: 'X-Robots-Tag', value: 'noindex' }
 				]
 			},
+			{
+				source: '/_next/static/js/(.*)',
+				headers: [
+					{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
+					{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=31536000, immutable' }
+				]
+			},
 			{
 				source: '/_next/static/(.*)',
 				headers: [
-					{ key: 'Cache-Control', value: 'public, max-age=3600, immutable' },
-					{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=3600, immutable' }
+					{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
+					{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=31536000, immutable' }
 				]
 			},
 			{
diff --git a/postcss.config.mjs b/postcss.config.mjs
index f8a51c1b..b8b17fde 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -2,7 +2,26 @@ const config = {
 	plugins: {
 		'@tailwindcss/postcss': {},
 		autoprefixer: {},
-		...(process.env.NODE_ENV === 'production' ? { cssnano: { preset: ['default', { discardComments: { removeAll: true } }] } } : {})
+		...(process.env.NODE_ENV === 'production'
+			? {
+					cssnano: {
+						preset: [
+							'default',
+							{
+								discardComments: { removeAll: true },
+								reduceIdents: true,
+								mergeLonghand: true,
+								mergeRules: true,
+								minifyFontValues: true,
+								minifyGradients: true,
+								normalizeWhitespace: true,
+								colormin: true,
+								calc: false
+							}
+						]
+					}
+				}
+			: {})
 	}
 };