Stop Configuring, Start Coding: The Ultimate Next.js 16 PWA Boilerplate 🚀....... Simple WebApp - Heavstal Tech™

#nextjs #pwa #opensource #webdev

The Problem with "Create Next App"

We all love create-next-app. It’s fast, it’s clean, and it gets you running in seconds.

But let's be honest—that's just the beginning. If you want a Production-Ready app, you immediately spend the next 4 hours doing the boring stuff:

Configuring the PWA (Service Workers, Manifests, Icons).
Setting up SEO (Sitemaps, robots.txt, Metadata).
Fixing ESLint and Prettier conflicts.
Setting up a CI/CD pipeline so you don't break production.

I got tired of doing this every time I started a new project. So, I built a solution.

Introducing Simple WebApp

I’ve open-sourced my internal boilerplate. It is a modern, opinionated, and battery-included template for building high-performance WebApps.

🔗 Repo: github.com/HeavstalTech/Simple_WebApp
🔗 Live Demo: simple-webapp.vercel.app

HERE'S ARE SOME LIVE DEMO

🛠 Under the Hood

This isn't just a "Hello World". It's a robust foundation built on the bleeding edge:

⚡ Next.js 16 (App Router): The latest and greatest.
📱 Native PWA Support: Built using @ducanh2912/next-pwa. It allows users to install your website as a native app on iOS and Android. It even works offline.
🔍 SEO Automation: Includes next-sitemap to auto-generate sitemaps on build. Plus, robots.ts and JSON-LD structured data are already set up in the layout.tsx.
🎨 Tailwind CSS: configured with Dark Mode support out of the box.
✅ CI/CD Pipeline: A pre-configured GitHub Action workflow that lints and builds your code on every push, preventing bad code from hitting production.

The "Gotchas" I Fixed For You

If you've tried using PWA plugins with Next.js 16 recently, you probably hit the Turbopack vs. Webpack wall.
I’ve already handled the configuration to ensure the Service Workers generate correctly without breaking the Next.js build process.

I also fixed the annoyances with ESLint 9 and the new flat config system, so you don't have to fight with the linter.

How to Use It

Stop wasting time on setup. Just fork it and go.

# 1. Clone the repo
git clone https://github.com/HeavstalTech/Simple_WebApp.git

# 2. Install dependencies
npm install

# 3. Run it
npm run dev

Contributions Welcome!

This is fully Open Source (MIT License). If you have ideas on how to make it even better, I’d love to see your Pull Requests.

Check it out, give it a ⭐️ if it saves you time, and let me know what you build with it!

View Source on GitHub

DEV Community