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.tech/how-to-creat...
Follow Avneesh on Twitter - / avneesh0612
Next PWA NPM - www.npmjs.com/package/next-pwa
More about Next.js - nextjs.org/
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
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.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...

[@thebuildguy7]

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

[@angel-pu7su]

Thanks James and Avneesh for the great tutorial.

[@ai_coding]

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

[@tushar.musique]

Very helpful. Learned a new thing today.

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

[@IvoTsochev]

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

[@JamesQQuick]

Yayyyyy

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

[@MiaUniversity]

WOW, THIS TUTORIAL IS REALLY WORKS!

[@geekySRM]

This is awesome!

[@andressalomon6703]

Great video!! Thank you very much James!

[@JamesQQuick]

Yayyyy

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

[@shoebilyas9664]

A very well explanation. Thanks a lot :).

[@palina_live]

Thank you so much for the clear explanation! 😀

[@JamesQQuick]

So glad this helped!

[@jeanchrinot]

I implemented this. It is amazing.

[@semiloreidowu4601]

This is very cool, definitely trying it out immediately

[@JamesQQuick]

Yay!

[@mhayk]

Very helpful. Thank you !

[@JamesQQuick]

Glad you enjoyed it!!

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

[@tapasadhikary]

This is cool. Thanks for sharing.

[@JamesQQuick]

Glad you enjoyed it!

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

[@sinashohrat2353]

this was helpful ty

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

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

[@dawid_dahl]

Awesome, thanks!

[@mdkutubail8848]

thanks broo it was very helpful for me

[@TheIguana3d]

wow, thank you very much!

[@ioanasbogdan]

what are you using to get the autocomplete on terminal?

[@vishnudarshan4762]

Need a video on how you setup your terminal, please

[@intuitivamkt]

What camera re you using? I like the setup!

[@gordgood6506]

You saved my arse man. Love you.

[@aayamshrestha5982]

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

[@mateuspamaral00]

Really cool thanks

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

[@sonwander1]

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

[@suleman234]

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

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

[@z1982_]

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

[@adarshrathi8265]

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

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

[@eronmonseleoaikhina5832]

which extension is your visual studio using @James Q Quick

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

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

[@tegasteve8195]

Thanks

[@webloom7345]

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

[@krystianwojtowicz9305]

how to cache pages for when off line?

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

[@unpluggedaman]

Thanks a lot

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

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

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

[@chiranthmjain7940]

is there any possibility to remove ellipsis from PWA MicrosoftEdge?

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

[@mustadirmahmood6271]

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

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

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

[@Chems-eddineSediri]

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

[@utkarshsrivastav3039]

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

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

[@davidbobadilla2323]

Is that a Superantural poster?

[@cbc911]

What icon pack are you using?

[@JamesQQuick]

Vs code icons I believe.

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

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

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

[@VKD007]

Class component 😂💯

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

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

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

[@mohamedboularas6480]

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

[@SHARMATUSHAR1_]

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

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

[@jopercito]

no working in next js 13 ?

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

[@bushigi5913]

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

[@bushigi5913]

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

[@santiagoparadelo1843]

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

[@bushigi5913]

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

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

[@ihechikaraav]

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

[@JamesQQuick]

Sure email me at [e-mail]

[@yashchauhan5710]

opppppppp ty spp good

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

[@familyiseverything1617]

Wow

[@warrior_pk]

It works on desktop but not on phone

[@TollyNext]

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 ?

[@hasindusithmin1074]

👍

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

[@loveboat]

Nextjs 13 blew this approach into smithereens.

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

[@us28363hdhd]

2:48 video starts here

[@JamesQQuick]

Thanks for sharing

[@TorgeirFredriksen]

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

[@JamesQQuick]

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

[@apriliandi__]

Next : PWA with Sveltekit....

[@JamesQQuick]

Great idea!

[@mdbillalyasir]

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

[@ZXZXZXZvvvZXZXZXZ]

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

[@seesmof]

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

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

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

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

[@user-yi3rq7jk2r]

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

[@FGA-47]

Thanks