update basePath for asset

next.config.mjs

@@ -9,6 +9,9 @@ const nextConfig = {
     ? 'https://sivamani-18.github.io/nextjs-boilerplate/'
     : undefined,
   trailingSlash: true,
+  publicRuntimeConfig: {
+    basePath: isProd ? '/nextjs-boilerplate' : '',
+  },
 };
 
 export default nextConfig;

src/app/page.tsx

@@ -1,5 +1,8 @@
+import getConfig from 'next/config';
 import Image from 'next/image';
 
+const { publicRuntimeConfig } = getConfig();
+
 export default function Home() {
   return (
     <main className='flex min-h-screen flex-col items-center justify-between p-24'>
@@ -17,7 +20,7 @@ export default function Home() {
           >
             By{' '}
             <Image
-              src='/vercel.svg'
+              src={`${publicRuntimeConfig.basePath}/vercel.svg`}
               alt='Vercel Logo'
               className='dark:invert'
               width={100}
@@ -31,7 +34,7 @@ export default function Home() {
       <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial-light before:bg-gradient-radial-dark before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic-light after:bg-gradient-conic-dark after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
         <Image
           className='relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert'
-          src='/next.svg'
+          src={`${publicRuntimeConfig.basePath}/next.svg`}
           alt='Next.js Logo'
           width={180}
           height={37}