feat(next.config.js): update basePath and assetPrefix to correctly se…

…rve assets from a subdirectory when deployed to GitHub Pages

examples/zkapps/04-zkapp-browser-ui/ui/next.config.js

@@ -1,26 +1,15 @@
 /** @type {import('next').NextConfig} */
-
-// Add your repository name here.
-let repoURL = '04-zkapp-browser-ui';
-const isProd = process.env.NODE_ENV === 'production'
 const nextConfig = {
   reactStrictMode: false,
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
-
-  /*  Used to serve the Next.js app from a subdirectory (the GitHub repo name) and 
-   * assetPrefix is used to serve assets (JS, CSS, images, etc.) from that subdirectory 
-   * when deployed to GitHub Pages. The assetPrefix needs to be added manually to any assets
-   * if they're not loaded by Next.js' automatic handling (for example, in CSS files or in a <img> element).
-   */
-  basePath: isProd ? `/${repoURL}`: '',
-  assetPrefix: isProd ? `/${repoURL}`: '',
 
   webpack(config) {
     config.resolve.alias = {
       ...config.resolve.alias,
-      snarkyjs: require('path').resolve('node_modules/snarkyjs'),
+      snarkyjs: require('path').resolve('node_modules/snarkyjs')
     };
     config.experiments = { ...config.experiments, topLevelAwait: true };
+    config.optimization.minimizer = [];
     return config;
   },
   // To enable SnarkyJS for the web, we must set the COOP and COEP headers.
@@ -32,16 +21,29 @@ const nextConfig = {
         headers: [
           {
             key: 'Cross-Origin-Opener-Policy',
-            value: 'same-origin',
+            value: 'same-origin'
           },
           {
             key: 'Cross-Origin-Embedder-Policy',
-            value: 'require-corp',
-          },
-        ],
-      },
+            value: 'require-corp'
+          }
+        ]
+      }
     ];
   },
+  images: {
+    unoptimized: true
+  },
+
+  /* Used to serve the Next.js app from a subdirectory (the GitHub repo name) and
+   * assetPrefix is used to serve assets (JS, CSS, images, etc.) from that subdirectory
+   * when deployed to GitHub Pages. The assetPrefix needs to be added manually to any assets
+   * if they're not loaded by Next.js' automatic handling (for example, in CSS files or in a <img> element).
+   * The 'ghp-postbuild.js' script in this project prepends the repo name to asset urls in the built css files
+   * after runing 'npm run deploy'.
+   */
+  basePath: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '', // update if your repo name changes for 'npm run deploy' to work successfully
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '' // update if your repo name changes for 'npm run deploy' to work successfully
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;