feat: dynamic static images

Author: hieuddo

.github/workflows/nextjs.yml

@@ -94,7 +94,7 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        run: ${{ steps.detect-package-manager.outputs.manager }} run build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v5
         with:

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 next-env.d.ts
 
 /src/generated/prisma
+/public/optimized/

next.config.ts

@@ -6,7 +6,8 @@ const isGitHubPages = process.env.GITHUB_PAGES === 'true';
 const nextConfig: NextConfig = {
   output: 'export',
   images: {
-    unoptimized: true,
+    loader: 'custom',
+    loaderFile: './src/lib/image-loader.ts',
   },
   basePath: isProd && isGitHubPages ? '/preferred-ai-nextjs' : '',
   assetPrefix: isProd && isGitHubPages ? '/preferred-ai-nextjs' : '',

package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "npx tsx scripts/optimize-all-images.ts && next dev",
+    "build": "npx tsx scripts/optimize-all-images.ts && next build",
     "start": "next start",
     "lint": "eslint",
-    "export": "next build",
+    "export": "npx tsx scripts/optimize-all-images.ts && next build",
     "crawl:publications": "npx tsx scripts/crawl-publications.ts"
   },
   "dependencies": {

scripts/optimize-all-images.ts

@@ -0,0 +1,96 @@
+import fs from "fs";
+import path from "path";
+import sharp from "sharp";
+
+const TARGET_WIDTHS = [256, 384, 640, 1080, 1920];
+const PUBLIC_DIR = path.join(process.cwd(), "public");
+const OPTIMIZED_DIR = path.join(PUBLIC_DIR, "optimized");
+
+// Directories to scan recursively for images
+const DIRS_TO_SCAN = ["team", "uploads"];
+const IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png"];
+
+function getFilesRecursively(dir: string, fileList: string[] = []): string[] {
+  const absoluteDir = path.join(PUBLIC_DIR, dir);
+  if (!fs.existsSync(absoluteDir)) return fileList;
+
+  const files = fs.readdirSync(absoluteDir);
+  for (const file of files) {
+    const relativePath = path.join(dir, file);
+    const absolutePath = path.join(PUBLIC_DIR, relativePath);
+    if (fs.statSync(absolutePath).isDirectory()) {
+      getFilesRecursively(relativePath, fileList);
+    } else {
+      const ext = path.extname(file).toLowerCase();
+      if (IMAGE_EXTENSIONS.includes(ext)) {
+        fileList.push(relativePath);
+      }
+    }
+  }
+  return fileList;
+}
+
+async function optimizeImage(srcRelativePath: string) {
+  const srcAbsolutePath = path.join(PUBLIC_DIR, srcRelativePath);
+  const srcStats = fs.statSync(srcAbsolutePath);
+  const srcMtime = srcStats.mtimeMs;
+
+  for (const width of TARGET_WIDTHS) {
+    const destRelativePath = path.join("optimized", String(width), srcRelativePath);
+    const destAbsolutePath = path.join(PUBLIC_DIR, destRelativePath);
+
+    // Incremental cache check: Skip if optimized file exists and is newer than source
+    if (fs.existsSync(destAbsolutePath)) {
+      const destStats = fs.statSync(destAbsolutePath);
+      if (destStats.mtimeMs >= srcMtime) {
+        continue;
+      }
+    }
+
+    // Create target directory if it doesn't exist
+    const destDir = path.dirname(destAbsolutePath);
+    fs.mkdirSync(destDir, { recursive: true });
+
+    try {
+      const ext = path.extname(srcRelativePath).toLowerCase();
+      const image = sharp(srcAbsolutePath);
+
+      // Perform high-quality resizing
+      // withoutEnlargement: true ensures we don't upscale small original images
+      let transformer = image.resize({ width, withoutEnlargement: true });
+
+      if (ext === ".png") {
+        transformer = transformer.png({ compressionLevel: 8, palette: true });
+      } else {
+        transformer = transformer.jpeg({ quality: 80, progressive: true });
+      }
+
+      await transformer.toFile(destAbsolutePath);
+      console.log(`✅ Optimized: /${srcRelativePath} ➡️ /${destRelativePath}`);
+    } catch (error) {
+      console.error(`❌ Failed to optimize /${srcRelativePath} at width ${width}:`, error);
+    }
+  }
+}
+
+async function main() {
+  console.log("🚀 Scanning public directories for image optimization...");
+  let allImages: string[] = [];
+  for (const dir of DIRS_TO_SCAN) {
+    allImages = allImages.concat(getFilesRecursively(dir));
+  }
+
+  console.log(`🔍 Found ${allImages.length} images to optimize.`);
+  
+  const startTime = Date.now();
+  for (const relativePath of allImages) {
+    await optimizeImage(relativePath);
+  }
+  const duration = ((Date.now() - startTime) / 1000).toFixed(2);
+  console.log(`🎉 Image optimization pipeline finished in ${duration}s.`);
+}
+
+main().catch((err) => {
+  console.error("FATAL: Image optimization script failed:", err);
+  process.exit(1);
+});