diff --git a/.eslintignore b/.eslintignore
index 223cd160..b92586ca 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,6 +4,3 @@ node_modules
 # nextron
 bin
 workspace
-
-# examples
-examples
diff --git a/.eslintrc.json b/.eslintrc.json
index 27a53c21..880551ec 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,6 +9,7 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-explicit-any": "error"
+    "@typescript-eslint/no-explicit-any": "error",
+    "@next/next/no-html-link-for-pages": "off"
   }
 }
diff --git a/.prettierignore b/.prettierignore
index 223cd160..b92586ca 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,6 +4,3 @@ node_modules
 # nextron
 bin
 workspace
-
-# examples
-examples
diff --git a/README.md b/README.md
index ee170eba..40bba39a 100644
--- a/README.md
+++ b/README.md
@@ -344,6 +344,24 @@ $ yarn create nextron-app my-app --example with-ant-design
 $ pnpm dlx create-nextron-app my-app --example with-ant-design
 ```
 
+### [examples/with-chakra-ui](./examples/with-chakra-ui)
+
+<p align="center">
+  <img src="https://i.imgur.com/oahHuxG.png">
+  <img src="https://i.imgur.com/sZ01Nyl.png">
+</p>
+
+```
+# with npx
+$ npx create-nextron-app my-app --example with-chakra-ui
+
+# with yarn
+$ yarn create nextron-app my-app --example with-chakra-ui
+
+# with pnpm
+$ pnpm dlx create-nextron-app my-app --example with-chakra-ui
+```
+
 ### [examples/with-emotion](./examples/with-emotion)
 
 <p align="center"><img src="https://i.imgur.com/3UKgyH7.png"></p>
diff --git a/examples/_template/js/main/background.js b/examples/_template/js/main/background.js
index aa95b431..62ae0cd1 100644
--- a/examples/_template/js/main/background.js
+++ b/examples/_template/js/main/background.js
@@ -1,32 +1,32 @@
-import { app } from 'electron';
-import serve from 'electron-serve';
-import { createWindow } from './helpers';
+import { app } from 'electron'
+import serve from 'electron-serve'
+import { createWindow } from './helpers'
 
-const isProd = process.env.NODE_ENV === 'production';
+const isProd = process.env.NODE_ENV === 'production'
 
 if (isProd) {
-  serve({ directory: 'app' });
+  serve({ directory: 'app' })
 } else {
-  app.setPath('userData', `${app.getPath('userData')} (development)`);
+  app.setPath('userData', `${app.getPath('userData')} (development)`)
 }
 
-(async () => {
-  await app.whenReady();
+;(async () => {
+  await app.whenReady()
 
   const mainWindow = createWindow('main', {
     width: 1000,
     height: 600,
-  });
+  })
 
   if (isProd) {
-    await mainWindow.loadURL('app://./home.html');
+    await mainWindow.loadURL('app://./home')
   } else {
-    const port = process.argv[2];
-    await mainWindow.loadURL(`http://localhost:${port}/home`);
-    mainWindow.webContents.openDevTools();
+    const port = process.argv[2]
+    await mainWindow.loadURL(`http://localhost:${port}/home`)
+    mainWindow.webContents.openDevTools()
   }
-})();
+})()
 
 app.on('window-all-closed', () => {
-  app.quit();
-});
+  app.quit()
+})
diff --git a/examples/_template/js/main/helpers/create-window.js b/examples/_template/js/main/helpers/create-window.js
index c40b2b6f..f6635f9f 100644
--- a/examples/_template/js/main/helpers/create-window.js
+++ b/examples/_template/js/main/helpers/create-window.js
@@ -1,32 +1,28 @@
-import {
-  screen,
-  BrowserWindow,
-} from 'electron';
-import Store from 'electron-store';
+import { screen, BrowserWindow } from 'electron'
+import Store from 'electron-store'
 
-export default function createWindow(windowName, options) {
-  const key = 'window-state';
-  const name = `window-state-${windowName}`;
-  const store = new Store({ name });
+export const createWindow = (windowName, options) => {
+  const key = 'window-state'
+  const name = `window-state-${windowName}`
+  const store = new Store({ name })
   const defaultSize = {
     width: options.width,
     height: options.height,
-  };
-  let state = {};
-  let win;
+  }
+  let state = {}
 
-  const restore = () => store.get(key, defaultSize);
+  const restore = () => store.get(key, defaultSize)
 
   const getCurrentPosition = () => {
-    const position = win.getPosition();
-    const size = win.getSize();
+    const position = win.getPosition()
+    const size = win.getSize()
     return {
       x: position[0],
       y: position[1],
       width: size[0],
       height: size[1],
-    };
-  };
+    }
+  }
 
   const windowWithinBounds = (windowState, bounds) => {
     return (
@@ -34,39 +30,39 @@ export default function createWindow(windowName, options) {
       windowState.y >= bounds.y &&
       windowState.x + windowState.width <= bounds.x + bounds.width &&
       windowState.y + windowState.height <= bounds.y + bounds.height
-    );
-  };
+    )
+  }
 
   const resetToDefaults = () => {
-    const bounds = screen.getPrimaryDisplay().bounds;
+    const bounds = screen.getPrimaryDisplay().bounds
     return Object.assign({}, defaultSize, {
       x: (bounds.width - defaultSize.width) / 2,
-      y: (bounds.height - defaultSize.height) / 2
-    });
-  };
+      y: (bounds.height - defaultSize.height) / 2,
+    })
+  }
 
   const ensureVisibleOnSomeDisplay = (windowState) => {
-    const visible = screen.getAllDisplays().some(display => {
+    const visible = screen.getAllDisplays().some((display) => {
       return windowWithinBounds(windowState, display.bounds)
-    });
+    })
     if (!visible) {
       // Window is partially or fully not visible now.
       // Reset it to safe defaults.
-      return resetToDefaults();
+      return resetToDefaults()
     }
-    return windowState;
-  };
+    return windowState
+  }
 
   const saveState = () => {
     if (!win.isMinimized() && !win.isMaximized()) {
-      Object.assign(state, getCurrentPosition());
+      Object.assign(state, getCurrentPosition())
     }
-    store.set(key, state);
-  };
+    store.set(key, state)
+  }
 
-  state = ensureVisibleOnSomeDisplay(restore());
+  state = ensureVisibleOnSomeDisplay(restore())
 
-  win = new BrowserWindow({
+  const win = new BrowserWindow({
     ...state,
     ...options,
     webPreferences: {
@@ -74,9 +70,9 @@ export default function createWindow(windowName, options) {
       contextIsolation: false,
       ...options.webPreferences,
     },
-  });
+  })
 
-  win.on('close', saveState);
+  win.on('close', saveState)
 
-  return win;
-};
+  return win
+}
diff --git a/examples/_template/js/main/helpers/index.js b/examples/_template/js/main/helpers/index.js
index da26903a..e1b9aad0 100644
--- a/examples/_template/js/main/helpers/index.js
+++ b/examples/_template/js/main/helpers/index.js
@@ -1,5 +1 @@
-import createWindow from './create-window';
-
-export {
-  createWindow,
-};
+export * from './create-window'
diff --git a/examples/_template/ts/main/background.ts b/examples/_template/ts/main/background.ts
index c8d28ffd..f6fa9d01 100644
--- a/examples/_template/ts/main/background.ts
+++ b/examples/_template/ts/main/background.ts
@@ -1,32 +1,32 @@
-import { app } from 'electron';
-import serve from 'electron-serve';
-import { createWindow } from './helpers';
+import { app } from 'electron'
+import serve from 'electron-serve'
+import { createWindow } from './helpers'
 
-const isProd: boolean = process.env.NODE_ENV === 'production';
+const isProd: boolean = process.env.NODE_ENV === 'production'
 
 if (isProd) {
-  serve({ directory: 'app' });
+  serve({ directory: 'app' })
 } else {
-  app.setPath('userData', `${app.getPath('userData')} (development)`);
+  app.setPath('userData', `${app.getPath('userData')} (development)`)
 }
 
-(async () => {
-  await app.whenReady();
+;(async () => {
+  await app.whenReady()
 
   const mainWindow = createWindow('main', {
     width: 1000,
     height: 600,
-  });
+  })
 
   if (isProd) {
-    await mainWindow.loadURL('app://./home.html');
+    await mainWindow.loadURL('app://./home')
   } else {
-    const port = process.argv[2];
-    await mainWindow.loadURL(`http://localhost:${port}/home`);
-    mainWindow.webContents.openDevTools();
+    const port = process.argv[2]
+    await mainWindow.loadURL(`http://localhost:${port}/home`)
+    mainWindow.webContents.openDevTools()
   }
-})();
+})()
 
 app.on('window-all-closed', () => {
-  app.quit();
-});
+  app.quit()
+})
diff --git a/examples/_template/ts/main/helpers/create-window.ts b/examples/_template/ts/main/helpers/create-window.ts
index cb62d24f..d965cc14 100644
--- a/examples/_template/ts/main/helpers/create-window.ts
+++ b/examples/_template/ts/main/helpers/create-window.ts
@@ -1,37 +1,36 @@
 import {
   screen,
   BrowserWindow,
-} from 'electron';
-import Store from 'electron-store';
-
-import type {
   BrowserWindowConstructorOptions,
-  Rectangle
-} from "electron";
+  Rectangle,
+} from 'electron'
+import Store from 'electron-store'
 
-export default (windowName: string, options: BrowserWindowConstructorOptions): BrowserWindow => {
-  const key = 'window-state';
-  const name = `window-state-${windowName}`;
-  const store = new Store<Rectangle>({ name });
+export const createWindow = (
+  windowName: string,
+  options: BrowserWindowConstructorOptions
+): BrowserWindow => {
+  const key = 'window-state'
+  const name = `window-state-${windowName}`
+  const store = new Store<Rectangle>({ name })
   const defaultSize = {
     width: options.width,
     height: options.height,
-  };
-  let state = {};
-  let win;
+  }
+  let state = {}
 
-  const restore = () => store.get(key, defaultSize);
+  const restore = () => store.get(key, defaultSize)
 
   const getCurrentPosition = () => {
-    const position = win.getPosition();
-    const size = win.getSize();
+    const position = win.getPosition()
+    const size = win.getSize()
     return {
       x: position[0],
       y: position[1],
       width: size[0],
       height: size[1],
-    };
-  };
+    }
+  }
 
   const windowWithinBounds = (windowState, bounds) => {
     return (
@@ -39,37 +38,37 @@ export default (windowName: string, options: BrowserWindowConstructorOptions): B
       windowState.y >= bounds.y &&
       windowState.x + windowState.width <= bounds.x + bounds.width &&
       windowState.y + windowState.height <= bounds.y + bounds.height
-    );
-  };
+    )
+  }
 
   const resetToDefaults = () => {
-    const bounds = screen.getPrimaryDisplay().bounds;
+    const bounds = screen.getPrimaryDisplay().bounds
     return Object.assign({}, defaultSize, {
       x: (bounds.width - defaultSize.width) / 2,
       y: (bounds.height - defaultSize.height) / 2,
-    });
-  };
+    })
+  }
 
-  const ensureVisibleOnSomeDisplay = windowState => {
-    const visible = screen.getAllDisplays().some(display => {
-      return windowWithinBounds(windowState, display.bounds);
-    });
+  const ensureVisibleOnSomeDisplay = (windowState) => {
+    const visible = screen.getAllDisplays().some((display) => {
+      return windowWithinBounds(windowState, display.bounds)
+    })
     if (!visible) {
       // Window is partially or fully not visible now.
       // Reset it to safe defaults.
-      return resetToDefaults();
+      return resetToDefaults()
     }
-    return windowState;
-  };
+    return windowState
+  }
 
   const saveState = () => {
     if (!win.isMinimized() && !win.isMaximized()) {
-      Object.assign(state, getCurrentPosition());
+      Object.assign(state, getCurrentPosition())
     }
-    store.set(key, state);
-  };
+    store.set(key, state)
+  }
 
-  state = ensureVisibleOnSomeDisplay(restore());
+  state = ensureVisibleOnSomeDisplay(restore())
 
   const browserOptions: BrowserWindowConstructorOptions = {
     ...state,
@@ -79,10 +78,10 @@ export default (windowName: string, options: BrowserWindowConstructorOptions): B
       contextIsolation: false,
       ...options.webPreferences,
     },
-  };
-  win = new BrowserWindow(browserOptions);
+  }
+  const win = new BrowserWindow(browserOptions)
 
-  win.on('close', saveState);
+  win.on('close', saveState)
 
-  return win;
-};
+  return win
+}
diff --git a/examples/_template/ts/main/helpers/index.ts b/examples/_template/ts/main/helpers/index.ts
index da26903a..e1b9aad0 100644
--- a/examples/_template/ts/main/helpers/index.ts
+++ b/examples/_template/ts/main/helpers/index.ts
@@ -1,5 +1 @@
-import createWindow from './create-window';
-
-export {
-  createWindow,
-};
+export * from './create-window'
diff --git a/examples/basic-javascript/package.json b/examples/basic-javascript/package.json
index 7b207e04..ebfff0e1 100644
--- a/examples/basic-javascript/package.json
+++ b/examples/basic-javascript/package.json
@@ -18,7 +18,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/examples/basic-javascript/renderer/next.config.js b/examples/basic-javascript/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/basic-javascript/renderer/next.config.js
+++ b/examples/basic-javascript/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/basic-javascript/renderer/pages/home.jsx b/examples/basic-javascript/renderer/pages/home.jsx
index dbee5ce8..fcf3a9ff 100644
--- a/examples/basic-javascript/renderer/pages/home.jsx
+++ b/examples/basic-javascript/renderer/pages/home.jsx
@@ -16,7 +16,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
       </div>
     </React.Fragment>
   )
diff --git a/examples/basic-typescript/package.json b/examples/basic-typescript/package.json
index 24a2e2b3..243bcd8d 100644
--- a/examples/basic-typescript/package.json
+++ b/examples/basic-typescript/package.json
@@ -20,7 +20,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.4"
diff --git a/examples/basic-typescript/renderer/next.config.js b/examples/basic-typescript/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/basic-typescript/renderer/next.config.js
+++ b/examples/basic-typescript/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/basic-typescript/renderer/pages/home.tsx b/examples/basic-typescript/renderer/pages/home.tsx
index 48949b79..29e017c4 100644
--- a/examples/basic-typescript/renderer/pages/home.tsx
+++ b/examples/basic-typescript/renderer/pages/home.tsx
@@ -16,7 +16,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
       </div>
     </React.Fragment>
   )
diff --git a/examples/custom-build-options/package.json b/examples/custom-build-options/package.json
index 841421f3..76a0dd06 100644
--- a/examples/custom-build-options/package.json
+++ b/examples/custom-build-options/package.json
@@ -24,7 +24,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/examples/custom-build-options/renderer/next.config.js b/examples/custom-build-options/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/custom-build-options/renderer/next.config.js
+++ b/examples/custom-build-options/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/custom-build-options/renderer/pages/home.jsx b/examples/custom-build-options/renderer/pages/home.jsx
index e1a38661..7a5c8ae1 100644
--- a/examples/custom-build-options/renderer/pages/home.jsx
+++ b/examples/custom-build-options/renderer/pages/home.jsx
@@ -16,7 +16,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
       </div>
     </React.Fragment>
   )
diff --git a/examples/custom-main-entry/package.json b/examples/custom-main-entry/package.json
index 7b207e04..ebfff0e1 100644
--- a/examples/custom-main-entry/package.json
+++ b/examples/custom-main-entry/package.json
@@ -18,7 +18,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/examples/custom-main-entry/renderer/next.config.js b/examples/custom-main-entry/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/custom-main-entry/renderer/next.config.js
+++ b/examples/custom-main-entry/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/custom-main-entry/renderer/pages/home.jsx b/examples/custom-main-entry/renderer/pages/home.jsx
index 4b7d423d..d40bbccc 100644
--- a/examples/custom-main-entry/renderer/pages/home.jsx
+++ b/examples/custom-main-entry/renderer/pages/home.jsx
@@ -16,7 +16,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
       </div>
     </React.Fragment>
   )
diff --git a/examples/custom-renderer-port/package.json b/examples/custom-renderer-port/package.json
index ebabbcff..13db5f6e 100644
--- a/examples/custom-renderer-port/package.json
+++ b/examples/custom-renderer-port/package.json
@@ -18,7 +18,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/examples/custom-renderer-port/renderer/next.config.js b/examples/custom-renderer-port/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/custom-renderer-port/renderer/next.config.js
+++ b/examples/custom-renderer-port/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/custom-renderer-port/renderer/pages/home.jsx b/examples/custom-renderer-port/renderer/pages/home.jsx
index f819ddc9..a28d02a9 100644
--- a/examples/custom-renderer-port/renderer/pages/home.jsx
+++ b/examples/custom-renderer-port/renderer/pages/home.jsx
@@ -16,7 +16,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
       </div>
     </React.Fragment>
   )
diff --git a/examples/ipc-communication/main/background.js b/examples/ipc-communication/main/background.js
index ca2f7e83..4b8df0cb 100644
--- a/examples/ipc-communication/main/background.js
+++ b/examples/ipc-communication/main/background.js
@@ -19,7 +19,7 @@ if (isProd) {
   })
 
   if (isProd) {
-    await mainWindow.loadURL('app://./home.html')
+    await mainWindow.loadURL('app://./home')
   } else {
     const port = process.argv[2]
     await mainWindow.loadURL(`http://localhost:${port}/home`)
diff --git a/examples/ipc-communication/package.json b/examples/ipc-communication/package.json
index 7b207e04..ebfff0e1 100644
--- a/examples/ipc-communication/package.json
+++ b/examples/ipc-communication/package.json
@@ -18,7 +18,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/examples/ipc-communication/renderer/next.config.js b/examples/ipc-communication/renderer/next.config.js
index a046706a..661d1047 100644
--- a/examples/ipc-communication/renderer/next.config.js
+++ b/examples/ipc-communication/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer';
diff --git a/examples/ipc-communication/renderer/pages/home.jsx b/examples/ipc-communication/renderer/pages/home.jsx
index 2dc78247..a58a203c 100644
--- a/examples/ipc-communication/renderer/pages/home.jsx
+++ b/examples/ipc-communication/renderer/pages/home.jsx
@@ -54,7 +54,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
         <hr />
         <button onClick={onClickWithIpc}>IPC messaging</button>
         <button onClick={onClickWithIpcSync}>IPC messaging (sync)</button>
diff --git a/examples/store-data/main/background.js b/examples/store-data/main/background.js
index 108f4b39..fced62cb 100644
--- a/examples/store-data/main/background.js
+++ b/examples/store-data/main/background.js
@@ -20,7 +20,7 @@ if (isProd) {
   })
 
   if (isProd) {
-    await mainWindow.loadURL('app://./home.html')
+    await mainWindow.loadURL('app://./home')
   } else {
     const port = process.argv[2]
     await mainWindow.loadURL(`http://localhost:${port}/home`)
diff --git a/examples/store-data/package.json b/examples/store-data/package.json
index 7b207e04..ebfff0e1 100644
--- a/examples/store-data/package.json
+++ b/examples/store-data/package.json
@@ -18,7 +18,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/examples/store-data/renderer/next.config.js b/examples/store-data/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/store-data/renderer/next.config.js
+++ b/examples/store-data/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/store-data/renderer/pages/home.jsx b/examples/store-data/renderer/pages/home.jsx
index 590c2d0d..cefdc2d9 100644
--- a/examples/store-data/renderer/pages/home.jsx
+++ b/examples/store-data/renderer/pages/home.jsx
@@ -41,7 +41,12 @@ function Home() {
             <a>Go to next page</a>
           </Link>
         </p>
-        <Image src="/images/logo.png" alt="Logo image" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
         <hr />
         <h2>Enter your message:</h2>
         <form onSubmit={onSubmit}>
diff --git a/examples/with-ant-design/package.json b/examples/with-ant-design/package.json
index 32775635..3bbf7569 100644
--- a/examples/with-ant-design/package.json
+++ b/examples/with-ant-design/package.json
@@ -22,7 +22,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.4"
diff --git a/examples/with-ant-design/renderer/next.config.js b/examples/with-ant-design/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/with-ant-design/renderer/next.config.js
+++ b/examples/with-ant-design/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json
index b58d03da..fd55d23e 100644
--- a/examples/with-chakra-ui/package.json
+++ b/examples/with-chakra-ui/package.json
@@ -27,7 +27,7 @@
     "electron-builder": "^23.6.0",
     "framer-motion": "^6.5.1",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.5"
diff --git a/examples/with-chakra-ui/renderer/next.config.js b/examples/with-chakra-ui/renderer/next.config.js
index 9823aadc..b4bd175d 100644
--- a/examples/with-chakra-ui/renderer/next.config.js
+++ b/examples/with-chakra-ui/renderer/next.config.js
@@ -1,12 +1,13 @@
 module.exports = {
   trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
     }
+
     return config
   },
-  images: {
-    unoptimized: true,
-  },
 }
diff --git a/examples/with-chakra-ui/renderer/pages/home.tsx b/examples/with-chakra-ui/renderer/pages/home.tsx
index d4e9c262..aba05380 100644
--- a/examples/with-chakra-ui/renderer/pages/home.tsx
+++ b/examples/with-chakra-ui/renderer/pages/home.tsx
@@ -1,12 +1,12 @@
-import React from "react"
+import React from 'react'
 import Head from 'next/head'
 import Image from 'next/image'
-import { Button, Link as ChakraLink } from "@chakra-ui/react"
+import { Button, Link as ChakraLink } from '@chakra-ui/react'
 
 import { Container } from '../components/Container'
 import { DarkModeSwitch } from '../components/DarkModeSwitch'
 import { Footer } from '../components/Footer'
-import { Hero } from "../components/Hero"
+import { Hero } from '../components/Hero'
 
 const Home = () => (
   <React.Fragment>
@@ -18,8 +18,8 @@ const Home = () => (
       <Image
         src="/images/logo.png"
         alt="Logo image"
-        height='200px'
-        width='200px'
+        width="200px"
+        height="200px"
       />
       <Hero title={`⚡Electron⚡ + Next.js + Chakra UI = 🔥`} />
       <Footer>
@@ -34,7 +34,6 @@ const Home = () => (
           Go to next page
         </Button>
       </Footer>
-
     </Container>
   </React.Fragment>
 )
diff --git a/examples/with-chakra-ui/renderer/pages/next.tsx b/examples/with-chakra-ui/renderer/pages/next.tsx
index a034924f..88aaf26b 100644
--- a/examples/with-chakra-ui/renderer/pages/next.tsx
+++ b/examples/with-chakra-ui/renderer/pages/next.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Head from 'next/head'
 import Image from 'next/image'
-import { Button, Link as ChakraLink } from "@chakra-ui/react"
+import { Button, Link as ChakraLink } from '@chakra-ui/react'
 
 import { Container } from '../components/Container'
 import { DarkModeSwitch } from '../components/DarkModeSwitch'
@@ -9,36 +9,35 @@ import { Footer } from '../components/Footer'
 import { Hero } from '../components/Hero'
 
 const Next = () => {
-    return (
-        <React.Fragment>
-            <Head>
-                <title>Next - Nextron (with-typescript-chakra-ui)</title>
-            </Head>
-            <Container minHeight="100vh">
-                <DarkModeSwitch />
-                <Image
-                    src="/images/logo.png"
-                    alt="Logo image"
-                    height='200px'
-                    width='200px'
-                />
-                <Hero title={`⚡ Nextron ⚡`} />
-                <Footer>
-                    <Button
-                        as={ChakraLink}
-                        href="/home"
-                        variant="outline"
-                        colorScheme="teal"
-                        rounded="button"
-                        width="full"
-                    >
-                        Go to home page
-                    </Button>
-                </Footer>
-
-            </Container>
-        </React.Fragment>
-    )
+  return (
+    <React.Fragment>
+      <Head>
+        <title>Next - Nextron (with-typescript-chakra-ui)</title>
+      </Head>
+      <Container minHeight="100vh">
+        <DarkModeSwitch />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="200px"
+          height="200px"
+        />
+        <Hero title={`⚡ Nextron ⚡`} />
+        <Footer>
+          <Button
+            as={ChakraLink}
+            href="/home"
+            variant="outline"
+            colorScheme="teal"
+            rounded="button"
+            width="full"
+          >
+            Go to home page
+          </Button>
+        </Footer>
+      </Container>
+    </React.Fragment>
+  )
 }
 
-export default Next
\ No newline at end of file
+export default Next
diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json
index e3eca7e4..dfb486fb 100644
--- a/examples/with-emotion/package.json
+++ b/examples/with-emotion/package.json
@@ -23,7 +23,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.4"
diff --git a/examples/with-emotion/renderer/next.config.js b/examples/with-emotion/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/with-emotion/renderer/next.config.js
+++ b/examples/with-emotion/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/with-material-ui/package.json b/examples/with-material-ui/package.json
index e9545220..66d9d602 100644
--- a/examples/with-material-ui/package.json
+++ b/examples/with-material-ui/package.json
@@ -25,7 +25,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.4"
diff --git a/examples/with-material-ui/renderer/next.config.js b/examples/with-material-ui/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/with-material-ui/renderer/next.config.js
+++ b/examples/with-material-ui/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/with-material-ui/renderer/pages/home.tsx b/examples/with-material-ui/renderer/pages/home.tsx
index 1c7653e4..5f55d576 100644
--- a/examples/with-material-ui/renderer/pages/home.tsx
+++ b/examples/with-material-ui/renderer/pages/home.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Head from 'next/head'
+import Image from 'next/image'
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
@@ -45,7 +46,12 @@ function Home() {
         <Typography variant="subtitle1" gutterBottom>
           with Nextron
         </Typography>
-        <img src="/images/logo.png" />
+        <Image
+          src="/images/logo.png"
+          alt="Logo image"
+          width="256px"
+          height="256px"
+        />
         <Typography gutterBottom>
           <Link href="/next">Go to the next page</Link>
         </Typography>
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index bb9fa445..9f1bcf04 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -21,7 +21,7 @@
     "electron": "^21.3.3",
     "electron-builder": "^23.6.0",
     "next": "^12.3.4",
-    "nextron": "^8.7.0",
+    "nextron": "^8.8.0",
     "postcss": "^8.4.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/with-tailwindcss/renderer/next.config.js b/examples/with-tailwindcss/renderer/next.config.js
index 8fcb4d18..b4bd175d 100644
--- a/examples/with-tailwindcss/renderer/next.config.js
+++ b/examples/with-tailwindcss/renderer/next.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.target = 'electron-renderer'
diff --git a/examples/with-tailwindcss/renderer/pages/home.tsx b/examples/with-tailwindcss/renderer/pages/home.tsx
index 6ff00c41..448b7a65 100644
--- a/examples/with-tailwindcss/renderer/pages/home.tsx
+++ b/examples/with-tailwindcss/renderer/pages/home.tsx
@@ -14,6 +14,8 @@ function Home() {
           className="ml-auto mr-auto"
           src="/images/logo.png"
           alt="Logo image"
+          width="256px"
+          height="256px"
         />
         <span>⚡ Electron ⚡</span>
         <span>+</span>
diff --git a/examples/with-tailwindcss/renderer/pages/next.tsx b/examples/with-tailwindcss/renderer/pages/next.tsx
index efac6044..c0e2b87a 100644
--- a/examples/with-tailwindcss/renderer/pages/next.tsx
+++ b/examples/with-tailwindcss/renderer/pages/next.tsx
@@ -14,6 +14,8 @@ function Next() {
           className="ml-auto mr-auto"
           src="/images/logo.png"
           alt="Logo image"
+          width="256px"
+          height="256px"
         />
         <span>⚡ Nextron ⚡</span>
       </div>
diff --git a/package.json b/package.json
index 9232133c..52e09a9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextron",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "description": "⚡ NEXT.js + Electron ⚡",
   "repository": "git@github.com:saltyshiomix/nextron.git",
   "author": "Shiono Yoshihide <shiono.yoshihide@gmail.com>",