From d7f5e9488d2677c402e9a44440a52dcb34112db8 Mon Sep 17 00:00:00 2001 From: ymekuria Date: Thu, 17 Aug 2023 01:40:59 -0700 Subject: [PATCH] feat(next.config.js): update basePath and assetPrefix to correctly serve assets from a subdirectory when deployed to GitHub Pages --- .../04-zkapp-browser-ui/ui/next.config.js | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/next.config.js b/examples/zkapps/04-zkapp-browser-ui/ui/next.config.js index dcd72a5f3..b9a678b0c 100644 --- a/examples/zkapps/04-zkapp-browser-ui/ui/next.config.js +++ b/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 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 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; \ No newline at end of file