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

You can create a PWA with Next.js in just a few minutes! PWAs (Progressive Web Apps) are like hybrid applications that run in the context of a browser, but look and act like native apps. This means your website can become a dedicated icon and app on your computer!
Avneesh's Article - blog.avneesh.te...
Follow Avneesh on Twitter - / avneesh0612
Next PWA NPM - www.npmjs.com/...
More about Next.js - nextjs.org/
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquic...
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquic...
Learn everything you need to know about Visual Studio Code - www.udemy.com/...
Build a Quiz App - www.udemy.com/...

[@journeyoftulsi]

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

[@avneesh0612]

This was a very fun collab :D

[@michelgerges2678]

That's awesome bro great JOB keep up the good work ;D

[@MaxProgramming]

It's a huge achievement! Great work bro!

[@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);

[@czyzonrobinson6475]

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);

[@sifact1391]

Thanks man

[@faroukallani982]

you are a real Robinson!

[@ai_coding]

u saved me g

[@felipepersegona9354]

Just saved my ass

[@kikevanegazz325]

Genius!

[@ai_coding]

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

[@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 😁

[@JamesQQuick]

Ahhhh amazing. So glad I did!!

[@angel-pu7su]

Thanks James and Avneesh for the great tutorial.

[@preciousegwuenu2938]

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.

[@MiaUniversity]

WOW, THIS TUTORIAL IS REALLY WORKS!

[@iknowishare-9705]

Amazing tips. Thank you so much 🥰

[@IvoTsochev]

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

[@JamesQQuick]

Yayyyyy

[@jeanchrinot]

I implemented this. It is amazing.

[@tushar.musique]

Very helpful. Learned a new thing today.

[@semiloreidowu4601]

This is very cool, definitely trying it out immediately

[@JamesQQuick]

Yay!

[@palina-live]

Thank you so much for the clear explanation! 😀

[@JamesQQuick]

So glad this helped!

[@andressalomon6703]

Great video!! Thank you very much James!

[@JamesQQuick]

Yayyyy

[@sofiap08]

If you are getting this error: "Please check your GenerateSW plugin configuration: [WebpackGenerateSW] 'reactStrictMode' property is not expected to be here. Did you mean property 'exclude'?" THIS WORKED FOR ME: Replace the code in your 'next.config.js' with the below: const withPWA = require('next-pwa')({ dest: 'public' }) module.exports = withPWA({ // next.js config })

[@tapasadhikary]

This is cool. Thanks for sharing.

[@JamesQQuick]

Glad you enjoyed it!

[@aerotheory]

I enjoyed watching this segment on your new camera. Any chance of mentioning what camera you used? I need some closure...

[@JamesQQuick]

Haha it’s the Sony a6400 with sigma 1.4 16mm lens :)

[@tagecc5280]

@@JamesQQuick nice

[@vishnudarshan4762]

Need a video on how you setup your terminal, please

[@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

[@metamedian]

Service workers only work with https, right? How do you do that for localhost development testing? I've been pulling my hair why my service workers aren't runnin after trying out a bunch of nextjs templates for PWA apps.

[@geekySRM]

This is awesome!

[@nikoreva2078]

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?

[@EdgarLindo]

So, my run build was good without errors, but it didn't create the sw.js files.... I am also getting errors / warnings that GenerateSW has been called multiple times...

[@mhayk]

Very helpful. Thank you !

[@JamesQQuick]

Glad you enjoyed it!!

[@mdkutubail8848]

thanks broo it was very helpful for me

[@aayamshrestha5982]

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

[@intuitivamkt]

What camera re you using? I like the setup!

[@felixmenendez]

This is great. Is it possible to create a sort of installer file to install the app without using de browser?

[@JamesQQuick]

Not that I know of but maybe…?

[@mustadirmahmood6271]

The solution is for pages router. Are there any similar contents available for app router?

[@adarshrathi8265]

bro, are you made multi form step. I want to make website clone of zety resume builder in which use multi step form.

[@hectordnc]

Thank you. But I have a question. When my application is in 'src/app' and not in 'pages/' then the pwa doesn't work. How to solve it?

[@ioanasbogdan]

what are you using to get the autocomplete on terminal?

[@shoebilyas9664]

A very well explanation. Thanks a lot :).

[@blazi_0]

guys just install old version of next-pwa the new version not working with nextjs new update yet: npm install next-pwa@5.5.4

[@gordgood6506]

You saved my arse man. Love you.

[@sinashohrat2353]

this was helpful ty

[@TheIguana3d]

wow, thank you very much!

[@krtirtho]

Hw you're getting VIM like autocomplete in VSCode terminal?🤔

[@JamesQQuick]

It’s an app called fig :)

[@krtirtho]

@@JamesQQuick Thanks for letting me know

[@dawid_dahl]

Awesome, thanks!

[@z1982_]

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

[@webloom7345]

well done James very nice video but at 12:15 , sounds a noise like on/off

[@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?

[@Chems-eddineSediri]

i did exactly the sane thing. no errors, but the icon on the url doesnt appear any ideas pls?

[@chiranthmjain7940]

is there any possibility to remove ellipsis from PWA MicrosoftEdge?

[@paul-gerhardsiegel7065]

With Next.js 14 "next.config.js" now is "next.config.mjs". I removed the latter and exchanged it with a next.config.js as follows: const withPWA = require('next-pwa')({ dest: 'public', register: true, skipWaiting: true, disable: process.env.NODE_ENV === "development", }) module.exports = withPWA({ reactStrictMode: false, }) After compleating everything else the Download icon is missing. In my case the cause was an entry in the manifest.json. Exchange the following entry "start_url": "/" with "start_url":"/app/"

[@mateuspamaral00]

Really cool thanks

[@imvolkankaban]

How about a website with bootstrap 5, if can't start from scratch?

[@JamesQQuick]

Ah good idea. I haven’t used bootstrap in a few years now

[@denniszenanywhere]

Next is? I thought you switched to svelte all the way? 😃 it’s ok. Can you do a next js vs svelte project? Do both and show us differences? Thanks

[@MaxProgramming]

that's a superb idea

[@linchen5913]

Hi, all! I've heard of PWA for a while and I've create a few myself. However, it seems nobody's using PWA in the real world? To my experience, people are still using native application rather than PWA. What's your opinion on this?

[@nikoreva2078]

You need to tell people to install your app and give them instructions how to do that. But I agree, this feature - while cool and useful - is still not "mainstream".

[@LarsRyeJeppesen]

You must be new lol

[@linchen5913]

@@LarsRyeJeppesen Indeed! After some discussion with people other than my country, I found that only people in my country don't use PWA!!!

[@santiagoparadelo1843]

​@@linchen5913 Here in Argentina, people dont use PWA either. But I agreed with Niko Reva, if u add some instructions maybe people will use it !

[@linchen5913]

@@santiagoparadelo1843 Isn't it enough for the user if the browser ask you to add the app to your desktop?

[@Perrynatufe9105]

Thanks

[@piyushjaiswal6238]

hey! I am using next-pwa 5.5.0 .Doing everything right and tried evrything but service-worker.js is not generating on npm run build. please help someone

[@thearong_5853]

with typescript i got error and not working

[@angel-pu7su]

Replace the code in your 'next.config.js' with the below: /** @type {import('next').NextConfig} */ const withPWA = require("next-pwa"); module.exports = withPWA({ reactStrictMode: true, pwa: { dest: "public", register: true, skipWaiting: true, disable: process.env.NODE_ENV === "development", }, }); Copy and paste exactly as is.

[@ronnyjubhari9042]

Can i use next.js with codeigniter, how to connect it to views folder in codeigniter? How to change default page/ home page next.js to codeigniter php file?

[@krystianwojtowicz9305]

how to cache pages for when off line?

[@webpapi]

Tested this and works fine on localhost:3000 (dev mode) but fails to deploy to Prod. Hosting on Vercel as well. 'Unable to fetch manifest' on chrome latest version.

[@riyaldihasan7634]

Is it solved?

[@suleman234]

james i have a question do u like cobalt 2 more or midnight synth ?????? pls answer

[@shabanelmogy7912]

thanks

[@sonwander1]

Hello! Thanks for the video! What if i have a wordpress installation as backend using GraphQL? Is the process similar to this?

[@davidbobadilla2323]

Is that a Superantural poster?

[@alvidervishaj231]

How do you get auto complete in terminal ?

[@chaseharrison7002]

as you type press tab.. so in the terminal, let's say you want to cd into Documents: cd Docu (now press tab!) ...you will see: cd Documents

[@JamesQQuick]

That and I’m using an app called fig which provides intellisense before pressing tab

[@eronmonseleoaikhina5832]

which extension is your visual studio using @James Q Quick

[@unpluggedaman]

Thanks a lot

[@johnyepthomi892]

Good content. I hope you’re getting enough rest. Don’t overwork yourself.

[@JamesQQuick]

I'm not. I just always have bags. I sleep lots :)

Hi @James . Great video as usual. I was wondering why you don't change the theme color or the url of the apple-touch-icon ?

[@JamesQQuick]

Hey hey! I'm not sure what that specific setting is? lol

[@joematkin3540]

ANYONE HAVING ISSUES: install old version of next-pwa the new version not working with nextjs new update yet: npm install next-pwa@5.5.4 Just echoing what someone else said.

[@VKD007]

Class component 😂💯

[@cbc911]

What icon pack are you using?

[@JamesQQuick]

Vs code icons I believe.

[@icanamer7113]

Hi this actually was a great video, but I also have a question: is there a way to not use the manifest.json and just making the setup directly from the _document file itself?

[@LarsRyeJeppesen]

Build fails, missing error pages

[@angel-pu7su]

Replace the code in your 'next.config.js' with the below: /** @type {import('next').NextConfig} */ const withPWA = require("next-pwa"); module.exports = withPWA({ reactStrictMode: true, pwa: { dest: "public", register: true, skipWaiting: true, disable: process.env.NODE_ENV === "development", }, }); Copy and paste exactly is.

[@us28363hdhd]

2:48 video starts here

[@JamesQQuick]

Thanks for sharing

[@TheFilmAnonymous]

so @whattheyknew & we dnot know was PWA can be build with anything, not necessarily with just one thing - just learn javascript and there are a plenty isn't it ? or ?

[@jopercito]

no working in next js 13 ?

[@DelightBessie]

Can you please update the tutorial for next.js 14

[@ihechikaraav]

Thanks for the video. Anyway to get in touch with you privately?

[@JamesQQuick]

Sure email me at [e-mail]

[@SharmaTushar1-yt]

Make sure to use a png file for manifest.json. I was using an svg.

[@xHeroinBoBx]

What extension are you using for the bundle size or import size inline? When you imported next-pwa it said calculating... thanks :-)

[@sarcasticdna]

Extension name is import-cost I guess

[@SandraWantsCoke]

There's no zip generated, only some .html file

[@mythm2063]

me too, did you resolve it ?

[@SandraWantsCoke]

@@mythm2063 I wrote the manifest file per hand and used some other online manifest icon generator (I really don't remember which, but I guess just pick any one)

[@mythm2063]

@@SandraWantsCoke did you get the install button at teh end because i did that too but after building i still don't see the install feature.

[@vascorebolo]

Really nice video. I was trying this myself, I did everything as in the video, even went through Avneesh's article just to make sure, but I can never see the icon to download the PWA in the browser. I'm using Chrome Version 95.0.4638.69, node v16.13.0, yarn 1.22.17, next-pwa 5.4.0. Does anyone had any issue or have a clue on what's going on? Thanks

[@ramonmorcillo205]

Hi Vasco! I am having the same issue, actually. Did you find a way to solve it? :)

[@franciscoramos8381]

Same here 😢

[@d8mle]

I have the same problem. Would love to hear if anybody got this to work. Edit: Found out that you need to make sure there is no mistakes in your manifest file. Inspect the site in chrome and check you Application tab. It should tell if there is any issues with the manifest. Fix them and everything will work.

[@michaelklit7799]

Great and informative. But it aint working anymore :). A lot of those folders dont show up when following the video

[@slavenDj]

u are probaly using app routes instead of page routes

[@michaelklit7799]

no clue I followed it exactly like shown, got a plugin instead since the future of PWA is hanging in a thread and is basically only working properly on Chrome @@slavenDj But in my experience. Anything that uses NPM is bound to break at any given time.

[@mohamedboularas6480]

Hello greate tuto, please create same video for pwa for mobile

[@warrior_pk]

It works on desktop but not on phone

[@loveboat]

Nextjs 13 blew this approach into smithereens.

[@yashchauhan5710]

opppppppp ty spp good

[@mdbillalyasir]

on your mac screen, there is a video called beakfast, please correct this spelling.🙃

[@hasindusithmin1074]

👍

[@familyiseverything1617]

Wow

[@shinjansaha240]

If anyone wants it for NextJS 14 import withPWA from 'next-pwa'; const nextConfig = { reactStrictMode: true, }; export default withPWA({ dest: 'public', // disable: process.env.NODE_ENV === 'development', })(nextConfig);

[@TorgeirFredriksen]

Now imagine if you could use this on iOS devices...

[@JamesQQuick]

Why can't you? You can use PWAs on iOS devices :)

[@seesmof]

GOD bless, get saved from hell: repent of your sins and put your faith in the Lord Jesus Christ ✝💓

[@apriliandi__]

Next : PWA with Sveltekit....

[@JamesQQuick]

Great idea!

[@ZXZXZXZvvvZXZXZXZ]

Тут меньше воды и понятнее: kzbin.info/www/bejne/e4TMfoWGhNF_rrc

[@StijnHommes]

2:35 And that is a great example of PWAs are misleading. Why would you run Twitter outside your browser? There is literally no benefit whatsoever.

[@JamesQQuick]

There is actually. I can toggle to it as a separate app instead of switching through 10 tabs to find it. And that’s on desktop. It’s even more beneficial on mobile devices

[@breezystormatic827]

@@JamesQQuick plus there is the notifications part. idk if it's widely supported yet.

[@StijnHommes]

@@JamesQQuick You can do the same by opening this in a separate browser window instead of a tab or by making an actual app. No reason to introduce malware to do something you can already do.

[@StijnHommes]

@@breezystormatic827 websites can also send notifications. Most people choose to turn those off anyway, so that isn't a benefit either.

[@StijnHommes]

2:10 Twitter isn't just a progressive web app. It allows you to get misled and install a fake app (Twitter Lite), but they actually still offer the real native application.

[@LarsRyeJeppesen]

Mindboggling how clumsy and complex this is compared to angular, svelte, vue. React is really horrible

[@blazi_0]

wired it looks very clean and not complex at all to me. its about how much exp. you have with react apps. im begginer in nextjs but i understand it perfectly

[@StijnHommes]

1:05 A a PWA is actually seriously misnamed. It's not an app. Just a fancy website built using malware "technology" by "developers" who can't be bothered to code a real native app. Stop taking the easy way out and build the app users deserve.

[@StijnHommes]

Why not build real native apps? Don't you want your users to get the best possible app instead of a fancy website?

[@JamesQQuick]

Great question. The speed to development is worth considering especially if you have a team full of react developers. This enables to you to leverage the same skill set to hit multiple platforms. If you have specific needs and need to specifically go native that’s understandable. However you can get a lot of that with a pwa

[@StijnHommes]

@@JamesQQuick Let me rephrase: why should I (as a user) care about how easy it is for a developer to use? I've already seen way too many PWA's that fail at being responsive and interactive when that is supposedly their main strength.

[@LarsRyeJeppesen]

Lol

[@WanderingBall]

err : ./node_modules/@nodelib/fs.scandir/out/adapters/fs.js:4:0 Module not found: Can't resolve 'fs'

[@utkarshsrivastav3039]

after running the build command i am not getting sw.js in public folder why??

[@FGA-47]

Thanks