fix: github pages上で画像が読み込めないバグを修正

.github/workflows/push-feature.yml

@@ -39,4 +39,5 @@ jobs:
       - run: npm run build
         env:
           CI: true
+          GITHUB_PAGES: true
       - run: npm run lint

.github/workflows/push-main.yml

@@ -37,6 +37,7 @@ jobs:
       - run: npm run build
         env:
           CI: true
+          GITHUB_PAGES: true
       - name: ビルド結果を GitHub Pages へ配置します。
         uses: peaceiris/actions-gh-pages@v3
         with:

next.config.js

@@ -1,5 +1,18 @@
+const localDomain = '';
+const productDomain = 'https://virtualprogrammersnetwork.github.io';
+const productPath = '/vpn-website';
+const isProd = process.env.NODE_ENV === 'production';
+const isCI = !!process.env.CI;
+const path = isCI && isProd ? productPath : '';
+const assetPrefix = (isCI && isProd ? productDomain : localDomain) + path;
+
 /** @type {Partial<import('next/dist/next-server/server/config-shared').NextConfig>} */
-const providedExports = { future: { strictPostcssConfiguration: true } };
+const providedExports = {
+  assetPrefix,
+  basePath: path,
+  env: { assetPrefix },
+  future: { strictPostcssConfiguration: true },
+};
 
 /** @type {Partial<import('next/dist/next-server/server/config-shared').NextConfig>} */
 module.exports = providedExports;

package.json

@@ -49,6 +49,7 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-twin": "^1.0.2",
     "browserslist": "^4.16.6",
+    "dotenv": "^10.0.0",
     "eslint": "^7.30.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-next": "^11.0.1",

src/components/image.tsx

@@ -12,7 +12,12 @@ type Props = {
 const Img = ({ src, alt, width, height }: Props): JSX.Element => {
   return (
     <picture>
-      <img src={src} alt={alt} width={width} height={height} />
+      <img
+        src={`${process.env.assetPrefix}${src}`}
+        alt={alt}
+        width={width}
+        height={height}
+      />
     </picture>
   );
 };