Turned it into a PWA

.gitignore

@@ -34,3 +34,11 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Auto Generated PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

README.md

@@ -1,6 +1,7 @@
 # [Live Site - https://portapack-mayhem.github.io/MayhemHub/](https://portapack-mayhem.github.io/MayhemHub/)
 
-This is a [Next.js](https://nextjs.org/) TypeScript project. We use [Tailwind](https://tailwindcss.com/) for styling
+This is a [Next.js](https://nextjs.org/) TypeScript project. We use [Tailwind](https://tailwindcss.com/) for styling.
+We have make this website a PWA, so you can load it even without an internet connection!
 ## Getting Started
 
 First, run the development server:

next.config.js

@@ -1,9 +1,20 @@
 /** @type {import('next').NextConfig} */
-// const withOffline = require('next-offline')
 
 const nextConfig = {
-    output: 'export',
-}
+  output: "export",
+  reactStrictMode: true, // Enable React strict mode for improved error handling
+  swcMinify: true, // Enable SWC minification for improved performance
+  compiler: {
+    removeConsole: process.env.NODE_ENV !== "development", // Remove console.log in production
+  },
+};
 
-// module.exports = withOffline(nextConfig)
-module.exports = nextConfig
+// Configuration object tells the next-pwa plugin
+const withPWA = require("next-pwa")({
+  dest: "public", // Destination directory for the PWA files
+  disable: process.env.NODE_ENV === "development", // Disable PWA in development mode
+  register: true, // Register the PWA service worker
+  skipWaiting: true, // Skip waiting for service worker activation
+});
+
+module.exports = withPWA(nextConfig);