Drop build time from 5 min to < 2

Author: zackproser

next.config.mjs

@@ -5,6 +5,11 @@ import remarkMermaid from "remark-mermaid";
 import rehypePrism from "@mapbox/rehype-prism";
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import bundleAnalyzer from "@next/bundle-analyzer";
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -18,7 +23,7 @@ const nextConfig = {
       "placehold.co",
       "avatars.githubusercontent.com"
     ],
-    formats: ['image/avif'], // 40% smaller than PNG
+    formats: ['image/webp'], // Changed from avif to webp
   },
   transpilePackages: [
     "react-tweet",
@@ -173,4 +178,4 @@ const withMDX = nextMDX({
   },
 });
 
-export default withMDX(nextConfig);
+export default withBundleAnalyzer(withMDX(nextConfig));

scripts/create-ai-assisted-dev-tools-comparison-pages.js

@@ -33,6 +33,8 @@ export const metadata = createMetadata({
   slug: "${slug}"
 })
 
+export const revalidate = 3600;
+
 export default function Page() {
   const tool1 = ${JSON.stringify(tool1)}
   const tool2 = ${JSON.stringify(tool2)}

scripts/create-vector-db-comparison-posts.js

@@ -53,6 +53,8 @@ export const metadata = {
   slug: "${slug}"
 }
 
+export const revalidate = 3600;
+
 export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 <Image src={vectorDatabasesCompared} alt="vector databases compared" />

src/app/demos/tokenize/TokenizeDemoLoader.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const TokenizationDemoClient = dynamic(() => import('./TokenizationDemoClient'), {
+  ssr: false,
+  loading: () => <div className="text-center p-8">Loading Interactive Demo...</div>,
+});
+
+export default function TokenizeDemoLoader() {
+  return <TokenizationDemoClient />;
+} 

src/app/demos/tokenize/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next'
 import { Suspense } from 'react'
 import { createMetadata } from '@/utils/createMetadata'
 import { Container } from '@/components/Container'
-import TokenizationDemoClient from './TokenizationDemoClient'
+import TokenizeDemoLoader from './TokenizeDemoLoader'
 
 export const metadata: Metadata = createMetadata({
   title: "Interactive tokenization demo for developers",
@@ -24,7 +24,7 @@ export default function TokenizationDemoPage() {
           </p>
         </header>
         <Suspense fallback={<div>Loading...</div>}>
-          <TokenizationDemoClient />
+          <TokenizeDemoLoader />
         </Suspense>
       </div>
     </Container>