Next.js PWA Starter 🚀

A modern Progressive Web App (PWA) starter built with Next.js 16, TypeScript, and next-pwa. This project demonstrates how to build an installable web application with offline support, service workers, and responsive app-like behavior using Next.js App Router.

✨ Features

• ⚡ Next.js 16 App Router
• 🔥 TypeScript Support
• 📱 Progressive Web App (PWA)
• 📦 Service Worker Support
• 📲 Installable on Mobile/Desktop
• 🌐 Offline Caching
• 🎨 Responsive UI
• 🚀 Vercel Deployment Ready
• ⚙️ Webpack Configuration for PWA Support

---

api-routes-pwa/
│
├── public/
│   ├── manifest.json
│   ├── sw.js
│   └── icons/
│       ├── icon-192.png
│       └── icon-512.png
│
├── src/
│   └── app/
│       ├── layout.tsx
│       └── page.tsx
│
├── next.config.ts
├── next-pwa.d.ts
├── package.json
└── tsconfig.json

---

📦 Installation

Clone the repository:

git clone https://github.com/your-username/nextjs-pwa-starter.git

Go inside project:

cd nextjs-pwa-starter

Install dependencies:

npm install

---

🚀 Run Development Server

npm run dev

Open:

http://localhost:3000

• Note: PWA is disabled in development mode intentionally.

---

🏗️ Production Build

To test full PWA functionality:

npm run build
npm start

Now:

• Service worker works
• Offline caching works
• Install button appears

---

⚙️ PWA Configuration

next.config.ts

import type { NextConfig } from "next";
import withPWAInit from "next-pwa";

const withPWA = withPWAInit({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
});

const nextConfig: NextConfig = {
  reactCompiler: true,
};

export default withPWA(nextConfig);

---

next-pwa.d.ts

declare module "next-pwa" {
  import { NextConfig } from "next";

  type PWAConfig = {
    dest: string;
    disable?: boolean;
    register?: boolean;
    skipWaiting?: boolean;
  };

  function withPWA(
    config: PWAConfig
  ): (nextConfig: NextConfig) => NextConfig;

  export default withPWA;
}

---

📱 Manifest Configuration

public/manifest.json

{
  "name": "Next.js PWA Starter",
  "short_name": "PWA Starter",
  "description": "A Progressive Web App built with Next.js",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

---

🧠 How PWA Works

This project uses:

• Service Workers → cache files and enable offline support
• Manifest File → makes app installable
• Icons → app launcher icons
• HTTPS → required for PWA support

When users visit the app:

• Browser downloads assets
• Service worker caches resources
• App becomes installable
• App works offline

---

📲 Install PWA

Desktop Chrome

• Open the app
• Click install icon in address bar Mobile Chrome
• Open browser menu
• Tap Install App

🧪 Testing PWA

Open Chrome DevTools:

F12 → Application

Check:

• Manifest ✅
• Service Worker ✅
• Cache Storage ✅ Run Lighthouse audit:

Inspect → Lighthouse → Progressive Web App

---

🚀 Deploy on Vercel

• Push code to GitHub.
• Import repository into Vercel.
• Make sure package.json uses webpack:

{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack",
    "start": "next start"
  }
}

Deploy 🚀

---

⚠️ Important Notes

Turbopack Issue next-pwa currently works best with Webpack. So this project uses:

--webpack

for compatibility.

---

📚 Learning Goals

This project helps beginners understand:

• Next.js App Router
• Service Workers
• Web App Manifest
• Offline Caching
• Installable Web Apps
• PWA Architecture

🔮 Future Improvements

You can extend this project with:

• Push Notifications
• Firebase Messaging
• IndexedDB Offline Storage
• Background Sync
• Authentication
• API Caching
• Mobile Splash Screens

---

🙋‍♂️ Author

Made with ❤️ by Tanmay Shil GitHub: @TanmayShil