Merge pull request #5 from DaveAldon/image-fix

Fix Static Images and Update Action Plugins

Author: DaveAldon

.github/workflows/node.js.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4.1.3
       - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
@@ -22,12 +22,15 @@ jobs:
       - name: Installing my packages
         run: npm ci
 
+      - name: Extract repository name
+        run: echo "BASE_PATH=/$(echo $GITHUB_REPOSITORY | cut -d '/' -f 2)" >> $GITHUB_ENV
+
       - name: Build my App
         run: npm run build && touch ./out/.nojekyll
 
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        uses: JamesIves/github-pages-deploy-action@v4.6.0
         with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: public # The branch the action should deploy to.
-          FOLDER: out # The folder the action should deploy.
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: public # The branch the action should deploy to.
+          folder: out # The folder the action should deploy to.

README.md

@@ -19,10 +19,10 @@ Follow the official Next.js [getting started guide](https://nextjs.org/docs/gett
 const nextConfig = {
   output: "export",
   images: {
-    loader: 'akamai',
-    path: '',
+    loader: "akamai",
+    path: "",
   },
-  assetPrefix: './',
+  assetPrefix: "./",
 };
 
 export default nextConfig;
@@ -70,24 +70,27 @@ jobs:
 
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4.1.3
       - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: "18.x"
 
       - name: Installing my packages
         run: npm ci
 
+      - name: Extract repository name
+        run: echo "BASE_PATH=/$(echo $GITHUB_REPOSITORY | cut -d '/' -f 2)" >> $GITHUB_ENV
+
       - name: Build my App
         run: npm run build && touch ./out/.nojekyll
 
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        uses: JamesIves/github-pages-deploy-action@v4.6.0
         with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: public # The branch the action will deploy to
-          FOLDER: out # The folder the action will deploy to
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: public # The branch the action should deploy to.
+          folder: out # The folder the action should deploy to.
 ```
 
 Once you commit these files, the actions tab for your repository will show your action running. Actions are triggered automatically after any commits by default.
@@ -102,6 +105,39 @@ Congratulations! You’ve successfully deployed a Next.js web application to Git
 
 If you want to see this repository’s deployment in action, you can visit the website [here](https://davealdon.github.io/Next.js-and-GitHub-Pages-Example/).
 
+#### Step 4: Images
+
+If you're using images out of the public folder, and serving them with Nextjs's `<Image/>` component, they won't work out of the box with static site generation. This is because there's no automatic handling of path prefixes for images.
+
+Nextjs gives a way to automatically prepend various assets with your Github's repository name, such as for `.css` files, but not for images served out of the Nextjs image component. To work around this, the path needs to be prefixed manually. I prefer a simple method:
+
+1. Take a look inside the `utils` folder for the `prefix.ts` file:
+
+```ts
+const prefix = process.env.BASE_PATH || "";
+export { prefix };
+```
+
+This simply looks for an environment variable path prefix, and returns it. For any image assets, we can simple reference it like this:
+
+```tsx
+<Image
+  src={`${prefix}/vercel.svg`}
+  alt="Vercel Logo"
+  width={72}
+  height={16}
+/>
+```
+
+If you use my Github action script, the assignment of this environment variable is actually handled automatically:
+
+```yml
+- name: Extract repository name
+  run: echo "BASE_PATH=/$(echo $GITHUB_REPOSITORY | cut -d '/' -f 2)" >> $GITHUB_ENV
+```
+
+It pulls the repository's name out and applies it to the build, without the need for making your own `.env` file. This way everything should work automatically if you use the prefix utility.
+
 ### Troubleshooting
 
 #### Fork problems

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "npx serve@latest out",
     "lint": "next lint"
   },
   "dependencies": {

pages/index.tsx

@@ -1,15 +1,16 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
+import { prefix } from "../utils/prefix";
 
 const Home: NextPage = () => {
   return (
     <div className={styles.container}>
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href={`${prefix}/favicon.ico`} />
       </Head>
 
       <main className={styles.main}>
@@ -18,7 +19,7 @@ const Home: NextPage = () => {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
 
@@ -59,14 +60,19 @@ const Home: NextPage = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+            <Image
+              src={`${prefix}/vercel.svg`}
+              alt="Vercel Logo"
+              width={72}
+              height={16}
+            />
           </span>
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;

utils/prefix.ts

@@ -0,0 +1,3 @@
+const prefix = process.env.BASE_PATH || "";
+
+export { prefix };