DEV Community

Cover image for How I Turned My Next.js App Into a PWA in Minutes
Илья Мучник
Илья Мучник

Posted on

How I Turned My Next.js App Into a PWA in Minutes

#nextjs #pwa #webdev #programming

Many developers believe that building a mobile app requires mastering Swift or Kotlin and enduring months of development. In reality, if you already have a functional website, you only need two files to allow users to "install" it directly onto their home screens.
What is a PWA?
A Progressive Web App (PWA) is a technology that allows a website to mimic a native app experience.
Installable: An icon appears on the home screen.
Speed: It loads faster due to smart caching.
Offline Access: Basic content remains accessible even without an internet connection.
Step 1: Create the manifest.json
This is your app’s "ID card." It tells the browser how the app should look and behave when installed.

{
  "name": "Your Project Name",
  "short_name": "Project",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Install next-pwa
​The easiest way to handle Service Workers in Next.js is the next-pwa package.

npm install next-pwa
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure next.config.js
Update your configuration to enable PWA support. This will automatically generate the sw.js file during the build process.

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development'
})

module.exports = withPWA({
  // Your existing Next.js config
})
Enter fullscreen mode Exit fullscreen mode

Step 4: Update your Meta Tags
In your layout.tsx (App Router) or _document.tsx (Pages Router), add the link to your manifest and theme color.

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
Enter fullscreen mode Exit fullscreen mode

Testing the Result
Run npm run build and npm run start.
Open your site in Chrome or Safari.
Look for the "Install" icon in the address bar or the "Add to Home Screen" option in the menu.
Conclusion
By leveraging the Next.js ecosystem, you can provide a mobile-first experience without the overhead of native development. It’s the perfect way to boost engagement for your web projects
See it in Action
I’ve already implemented these PWA features on my own project. You can check out how it feels and even install it on your device to see the performance boost firsthand:
👉 witchshouse.com
Support the Author
If this guide helped you turn your website into an app and saved you hours of development, I’d certainly appreciate a coffee to keep the code flowing!
https://buymeacoffee.com/witchHouse

Top comments (0)