Turn Your Next.js App into a Mobile Powerhouse (Easy PWA Guide)
Tags: nextjs, webdev, javascript, react
Published: 2024-05-18 13:07:00

## Introduction:

 Imagine this: Your users enjoy your Next.js app on their phones anytime, anywhereâ€”even without internet! Plus, they receive push notifications for updates. all with a seamless phone-app-like experience. **The best part? You can skip app store fees entirely!** 

 This guide unveils a simple approach to transforming your app into an installable **Progressive Web App (PWA).** 

### Who is using PWA's?

 I didn't know it before either, but i was surprised to find out that Twitter is actually a PWA! The experience was so smooth and indistinguishable from a traditional mobile app that it felt native. 

 But twitter isn't alone. Many companies have jumped on the PWA hype to enhance their apps. 

* **Starbucks:** Their PWA streamlines mobile ordering and payment, making your coffee runs a breeze.
* **Forbes:** They use a PWA to deliver a smooth reading experience, even when you're offline and craving some knowledge.
* **Alibaba:** This e-commerce giant saw a huge boost in conversions (76%!) after implementing a PWA, proving its power in driving sales.

## How do you convert your Nextjs app into a PWA?

### Step1: Supercharge Your App with next-pwa

 Let's dive into the technical side of transforming your Next.js app into a PWA. We'll achieve this with the help of next-pwa, a NextJS plugin package that simplifies PWA creation for Next.js projects. 

 Next-PWA essentially extends the Nextjs build process to include PWA functionalities like: 

* **Registering Service Workers: PWAs** leverage service workers, background scripts that run even when the browser tab is closed. They enable features like offline access and push notifications. **Since Javascript is single-threaded, these service workers act separately, ensuring smooth background operations without impacting your app's responsiveness.**
* **Smart Caching for Offline Experience:**For a seamless offline experience, PWA's need to cache essential resources (HTML, CSS, JavaScript, images, etc.) locally.
* You can read more about next-pwa here [next-pwa](https://www.npmjs.com/package/next-pwa).

 Just open your Nextjs project and type the following command on your terminal to install next-pwa as dependency. 

```
npm install next-pwa
```

```
/** @type {import('next').NextConfig} */
import nextPwa from 'next-pwa'
const nextConfig = {
  // Your awesome nextjs config goes here
  // ....
};
const withPwa = nextPwa({

    dest:"public",
    register:true,
    skipWaiting:true,
     // important to avoid running the generation everytime on your local environment
    disable:process.env.NODE_ENV === 'development',


});
export default withPwa(nextConfig);

```

### Step2: Generating a Manifest File.

 To customize our app's appearance when installed on mobile or desktop devices, we are required to create a manifest.json file pointing to our app assets ( logo images in different sizes). 

 We can do that manually, but as it's a tedious, repetitive task, many online websites offer it. Feel free to use any third-party website, but for this tutorial, we will be using [SimiCart](https://www.simicart.com/manifest-generator.html/). 

 You will be asked to enter some basic information, like your app name, description, theme color, etc. 

 After filling in all the fields, press on GENERATE MANIFEST. 

![Generate manifest.json from SimiCart](https://blog.spithacode.com/api/storage/screenshot-from-2024-05-18-08-53-24-png829933ea-ef90-4592-9548-fbe3c7a5d4d3)

Generate manifest.json from SimiCart

 You should get a manifest.zip downloaded into your machine , after decompressing it you should see this files. 

![manifest.zip content](https://blog.spithacode.com/api/storage/screenshot-from-2024-05-18-08-55-22-pngaad15a0d-0d4a-464a-a2d0-336c84abf3bf)

manifest.zip content

 Rename the manifest.webmanifest into manifest.json and copy everything into your nextjs public directory. 

![Your NextJS public directory content should contain these highlighted green files.](https://blog.spithacode.com/api/storage/screenshot-from-2024-05-18-08-56-14-png8cc1cb14-fd58-4fc3-9732-63a43754681c)

Your NextJS public directory content should contain these highlighted green files.

 As you you can see below, the manifest.A json file contains a simple json object pointing to your app logo assets, which you can easily write on your own. 

```
{
    "theme_color": "#893DF7",
    "background_color": "#ffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Spithacode",
    "short_name": "Spithacode",
    "description": "Spithacode is your go-to destination for igniting your coding passion. Explore expert insights, tutorials, and resources in web development. Elevate your profile, share knowledge, and discover new job opportunities in the ever-evolving tech landscape",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
```

 In your **app/layout.tsx** file, add an extra export of a constant object named **metadata** with the property manifest set to **"manifest.json"**. Next.js 14 will automatically add a meta tag into your HTML head that points to your manifest.json located in the public directory. 

```
export const metadata: Metadata = {
  manifest:"/manifest.json",
  
// ...rest of the metadata
};
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
<>{children}</>

  );
}

```

#### Additional note:

 To avoid **caching** your next-pwa-generated assets during your deployment, consider adding these lines to your ".**gitignore"** file. 

```
# to avoid caching pwa files

**/public/sw.js
**/public/sw.js.map

**/public/workbox-*.js
**/public/workbox-*.js.map

**/public/worker-*.js
**/public/worker-*.js.map

```

### Step3 : Enjoy your PWA:

 Run the next build command or deploy your newly configured app to Vercel. 

 After a succesfull build navigate into your website and run a lighthouse test by opening your browser devtools and navigating to the lighthouse tab. 

![open your browser devtools and navigating to the lighthouse tab](https://blog.spithacode.com/api/storage/screenshot-from-2024-05-18-12-39-02-png9068d076-d7af-49ab-a269-ea410e30fe0c)

open your browser devtools and navigating to the lighthouse tab

 Lighthouse is running a mobile simulation test on your website to calculate many metrics and check if you're website is installable 

![Lighthouse is running a mobile simulationÂ ](https://blog.spithacode.com/api/storage/screenshot-from-2024-05-18-12-39-07-png1844c640-4deb-49d5-a0b4-65ecf95936b6)

Lighthouse is running a mobile simulation 

 Keep your breathing quite and wait for the results :) . 

![Congratulations ! your website is installable](https://blog.spithacode.com/api/storage/screenshot-from-2024-05-18-12-40-11-pnge41d8124-6f8d-4990-b334-54f5b652bc38)

Congratulations ! your website is installable

 Congratulations ! your website is installable, now go back to your website, 

![Visite the Website on your mobile phone.](https://blog.spithacode.com/api/storage/photo1716031658-jpeg1c64e325-121c-4480-b228-f6c24e015cd6)

Visite the Website on your mobile phone.

 If a popup asking you to install the app does not appear, look for the install button in your browser settings. 

![Find the install app option then press it](https://blog.spithacode.com/api/storage/photo1716031658-1-jpegea03dd74-18a5-4ee0-98c1-b827590fabeb)

Find the install app option then press it

 Smash that install button. 

![Confirm the installation.](https://blog.spithacode.com/api/storage/photo1716031658-2-jpeg75bffc0a-7799-4c6e-b4c2-57e132c68250)

Confirm the installation.

![Your PWA app is installed!](https://blog.spithacode.com/api/storage/photo1716031658-3-jpeg1cb122b4-bec7-498a-a0e1-fa3c9f2b7c42)

Your PWA app is installed!

 Congratulations your app is installed succesfully on your phone! 

## Conclusion:

 Recap of the process: 

 This guide empowered you to transform your Next.js app into a powerful PWA. We explored the incredible benefits of PWAs, like offline access, push notifications, and bypassing app store or Google Play fees. 

**Remember the smooth mobile experience on Twitter?** That's a PWA! Companies like Starbucks and Forbes are leveraging PWAs to enhance their apps for two reasons: it creates a fantastic user experience and boosts results. 

**Ready to take action?** We showed you how to easily achieve this with next-pwa. This handy tool simplifies PWA creation by handling background functionality and caching for you ! 

 You can even personalize your app's appearance with a manifest file. 

**Now it's your turn!** Build your PWA and experience the advantages firsthand. 

 Share your results and any feedback in the comments below.