[DNM] debug assetPrefix

.github/workflows/nextjs.yml

@@ -7,7 +7,6 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -30,6 +29,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Get github repository name
+        id: github-repository
+        run: echo "name=${GITHUB_REPOSITORY#${GITHUB_REPOSITORY_OWNER}/}" >> $GITHUB_OUTPUT
       - name: Detect package manager
         id: detect-package-manager
         run: |
@@ -75,11 +77,11 @@ jobs:
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
         env:
-          NODE_ENV: production
+          ASSET_PREFIX: /${{ steps.github-repository.outputs.name }}
       - name: Static HTML export with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next export
         env:
-          NODE_ENV: production
+          ASSET_PREFIX: /${{ steps.github-repository.outputs.name }}
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

components/avatar.tsx

@@ -6,7 +6,7 @@ type Props = {
 const Avatar = ({ name, picture }: Props) => {
   return (
     <div className="flex items-center">
-      <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
+      <img src={`${process.env.ASSET_PREFIX}${picture}`} className="w-12 h-12 rounded-full mr-4" alt={name} />
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

components/cover-image.tsx

@@ -11,7 +11,7 @@ type Props = {
 const CoverImage = ({ title, src, slug }: Props) => {
   const image = (
     <Image
-      src={src}
+      src={`${process.env.ASSET_PREFIX}${src}`}
       alt={`Cover Image for ${title}`}
       className={cn('shadow-sm w-full', {
         'hover:shadow-lg transition-shadow duration-200': slug,

next.config.js

@@ -1,8 +1,6 @@
 /**
  * @type {import('next').NextConfig}
  */
-const isProd = process.env.NODE_ENV === 'production'
-
 module.exports = {
-  assetPrefix: isProd ? '/nextjs-blog-starter-sandbox' : undefined,
+  assetPrefix: process.env.ASSET_PREFIX ? process.env.ASSET_PREFIX : undefined,
 }