How to Create a PWA With Next.js in 10 Minutes

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
_____________________________________________

Connect with me 😀
_____________________________________________

COURSES 💻

[thebuildguy]

Bro not only explained but also showed other channels for explanation, you're a real saviour my man 🔥🔥

[internetdrew]

Thanks for the great video! Another way to do this is you have es7+ on Next.js 12:

import withPWA from "next-pwa"; (do this at the top)

const configWithPwa = withPWA({ dest: "public", // other config options});

export default configWithPwa(config);

[ai_coding]

...dude u saved me from countless days of searching. Thank you!

[angel-pusu]

Thanks James and Avneesh for the great tutorial.

[IvoTsochev]

This was an amazing video, James! I'll try it out, thank you

[czyzonrobinson]

With Next.js 12 it will produce an error when building the next.config.js file, use these values instead:
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
compiler: {
removeConsole: process.env.NODE_ENV !== "development",
},
};

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

module.exports = withPWA(nextConfig);

[tushar.musique]

Very helpful. Learned a new thing today.

[jonatanramhoj]

Great tutorial thanks! Just one question, if you disable pwa on development, there's no need to add those pwa files to gitignore since they will never get generated locally?

[preciousegwuenu]

Superb! This helped me although since I use nextjs app router, I had to use the layout.js and not _document.tsx and I also had to structure the next.js config in some type of way for it to work. also guys, you might want to add screenshots in your manifest.json file.

[semiloreidowu]

This is very cool, definitely trying it out immediately

[PaulBilton]

Great video - thank you! ...I'd like to learn and understand when to use ReactJS Native or PWA for a mobile web application - benefits and shortfalls - please. Thanks

[andressalomon]

Great video!! Thank you very much James!

[ioanasbogdan]

what are you using to get the autocomplete on terminal?

[palina_live]

Thank you so much for the clear explanation! 😀

[shoebilyas]

A very well explanation. Thanks a lot :).

[MaxProgramming]

Thank you very very much for including my video! Really appreciate that!
P.S. You spelled my name correctly, heard it for the first time from a native English speaker 😁

[aggbits]

Ty for your great videos!
Is the first request served via SSR or the app is not rendered on the server side at all?

[z_]

Hello thanks a lot. How can I write a service worker that will cache certain pages for offline support?

[aayamshrestha]

Love these videos. Can you please make playlist about google app scripts

[nikoreva]

Hey, I can't get the PWA running. I followed all the steps from the tutorial, but the service worker isn't being registered correctly. Can someone maybe give me a tip on how to fix the problem?