Added Product Hunt badge and optimize performance

tyaga001 · Oct 4, 2024 · e934811 · e934811
1 parent f631c20
commit e934811
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 95 deletions.
diff --git a/next.config.js b/next.config.js
@@ -4,7 +4,57 @@ const nextConfig = {
     experimental: {
         mdxRs: true,
     },
-}
+    reactStrictMode: true,
+    optimizeFonts: true,
+    swcMinify: true,
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'www.devtoolsacademy.com',
+                port: '',
+                pathname: '/**',
+            },
+        ],
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    },
+    async headers() {
+        return [
+            {
+                source: '/(.*)',
+                headers: [
+                    {
+                        key: 'Cache-Control',
+                        value: 'public, max-age=3600, must-revalidate',
+                    },
+                    {
+                        key: 'X-Frame-Options',
+                        value: 'DENY',
+                    },
+                    {
+                        key: 'X-Content-Type-Options',
+                        value: 'nosniff',
+                    },
+                ],
+            },
+        ];
+    },
+    webpack: (config, { dev, isServer }) => {
+        if (!dev && !isServer) {
+            config.optimization.splitChunks.cacheGroups.styles = {
+                name: 'styles',
+                test: /\.(css|scss)$/,
+                chunks: 'all',
+                enforce: true,
+            };
+        }
+        if (dev) {
+            config.devtool = 'eval-source-map';
+        }
+        return config;
+    },
+};
 
-const withMDX = require('@next/mdx')()
-module.exports = withMDX(nextConfig)
+const withMDX = require('@next/mdx')();
+module.exports = withMDX(nextConfig);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,12 +35,12 @@
     "highlight.js": "^11.10.0",
     "lucide-react": "^0.416.0",
     "mermaid": "^11.0.2",
-    "next": "14.2.5",
+    "next": "^14.2.13",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
     "prism-react-renderer": "^2.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.1",
     "react-type-animation": "^3.2.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { GeistSans } from 'geist/font/sans';
 import { GeistMono } from 'geist/font/mono';
 import { Analytics } from '@vercel/analytics/react';
@@ -52,17 +53,16 @@ export default function RootLayout({ children }: RootLayoutProps) {
                 strategy="afterInteractive"
             />
         </head>
-
         <body className={`${GeistSans.variable} ${GeistMono.variable} font-sans antialiased`}>
         <ClerkProvider>
             <div className="flex flex-col min-h-screen">
-                <Navbar/>
+                <Navbar />
                 <main className="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                        {children}
-                    </main>
-                </div>
+                    {children}
+                </main>
+            </div>
         </ClerkProvider>
-        <Analytics/>
+        <Analytics />
         </body>
         </html>
     );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
+import dynamic from 'next/dynamic';
 import FeaturedPosts from '@/components/FeaturedPosts';
 import Hero from '@/components/Hero';
-import Footer from '@/components/Footer';
-import { Testimonial } from '@/components/Testimonial';
+import { ProductHuntBadge } from '@/components/ProductHuntBadge'
+
+const Testimonial = dynamic(() => import('@/components/Testimonial').then(mod => mod.Testimonial), { ssr: false });
+const Footer = dynamic(() => import('@/components/Footer'), { ssr: true });
 
 const featuredPosts = [
     {
@@ -36,13 +39,13 @@ export default function Home() {
     return (
         <div className="min-h-screen bg-black text-white">
             <main>
-                <Hero/>
-                {featuredPosts.length > 0 && <FeaturedPosts posts={featuredPosts}/>}
+                <Hero />
+                {featuredPosts.length > 0 && <FeaturedPosts posts={featuredPosts} />}
             </main>
-            <div className="section-divider"></div>
-            <Testimonial/>
-            <div className="section-divider"></div>
-            <Footer/>
+            <div className="section-divider" />
+            <Testimonial />
+            <div className="section-divider" />
+            <Footer />
         </div>
     );
 }