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);
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);
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 😁
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.
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?
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 })
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...
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.
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/"
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?
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
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
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.
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 ?
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?
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".
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?
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.
3 года назад
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 ?
@@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)
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
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.
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.
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
@@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.
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.
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
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.
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
@@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.
This was a very fun collab :D
That's awesome bro great JOB keep up the good work ;D
It's a huge achievement! Great work bro!
Bro not only explained but also showed other channels for explanation, you're a real saviour my man 🔥🔥
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);
Thanks man
you are a real Robinson!
u saved me g
Just saved my ass
Genius!
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);
...dude u saved me from countless days of searching. Thank you!
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 😁
Ahhhh amazing. So glad I did!!
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.
what are you using to get the autocomplete on terminal?
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?
bro, are you made multi form step. I want to make website clone of zety resume builder in which use multi step form.
Need a video on how you setup your terminal, please
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
})
Thanks James and Avneesh for the great tutorial.
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...
Hello thanks a lot. How can I write a service worker that will cache certain pages for offline support?
What camera re you using? I like the setup!
with typescript i got error and not working
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.
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
well done James very nice video but at 12:15 , sounds a noise like on/off
Is that a Superantural poster?
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?
how to cache pages for when off line?
The solution is for pages router. Are there any similar contents available for app router?
is there any possibility to remove ellipsis from PWA MicrosoftEdge?
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.
WOW, THIS TUTORIAL IS REALLY WORKS!
I enjoyed watching this segment on your new camera. Any chance of mentioning what camera you used? I need some closure...
Haha it’s the Sony a6400 with sigma 1.4 16mm lens :)
@@JamesQQuick nice
This was an amazing video, James! I'll try it out, thank you
Yayyyyy
How about a website with bootstrap 5, if can't start from scratch?
Ah good idea. I haven’t used bootstrap in a few years now
This is great. Is it possible to create a sort of installer file to install the app without using de browser?
Not that I know of but maybe…?
i did exactly the sane thing. no errors, but the icon on the url doesnt appear any ideas pls?
which extension is your visual studio using @James Q Quick
james i have a question do u like cobalt 2 more or midnight synth ?????? pls answer
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/"
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?
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
Hw you're getting VIM like autocomplete in VSCode terminal?🤔
It’s an app called fig :)
@@JamesQQuick Thanks for letting me know
Ty for your great videos!
Is the first request served via SSR or the app is not rendered on the server side at all?
Hello! Thanks for the video! What if i have a wordpress installation as backend using GraphQL? Is the process similar to this?
Amazing tips.
Thank you so much 🥰
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
Build fails, missing error pages
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.
How do you get auto complete in terminal ?
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
That and I’m using an app called fig which provides intellisense before pressing tab
Very helpful. Learned a new thing today.
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.
Is it solved?
What icon pack are you using?
Vs code icons I believe.
I implemented this. It is amazing.
Love these videos. Can you please make playlist about google app scripts
This is very cool, definitely trying it out immediately
Yay!
Can you please update the tutorial for next.js 14
Great video!! Thank you very much James!
Yayyyy
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 ?
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?
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".
You must be new lol
@@LarsRyeJeppesen Indeed! After some discussion with people other than my country, I found that only people in my country don't use PWA!!!
@@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 !
@@santiagoparadelo1843 Isn't it enough for the user if the browser ask you to add the app to your desktop?
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?
no working in next js 13 ?
Thank you so much for the clear explanation! 😀
So glad this helped!
Make sure to use a png file for manifest.json. I was using an svg.
This is cool. Thanks for sharing.
Glad you enjoyed it!
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.
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 ?
Hey hey! I'm not sure what that specific setting is? lol
What extension are you using for the bundle size or import size inline? When you imported next-pwa it said calculating... thanks :-)
Extension name is import-cost I guess
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
that's a superb idea
This is awesome!
Very helpful. Thank you !
Glad you enjoyed it!!
thanks broo it was very helpful for me
Thanks for the video.
Anyway to get in touch with you privately?
Sure email me at james.q.quick@gmail.com
You saved my arse man. Love you.
A very well explanation. Thanks a lot :).
Hello greate tuto, please create same video for pwa for mobile
There's no zip generated, only some .html file
me too, did you resolve it ?
@@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)
@@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.
this was helpful ty
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
Hi Vasco! I am having the same issue, actually. Did you find a way to solve it? :)
Same here 😢
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.
2:48 video starts here
Thanks for sharing
It works on desktop but not on phone
wow, thank you very much!
Awesome, thanks!
Great and informative. But it aint working anymore :). A lot of those folders dont show up when following the video
u are probaly using app routes instead of page routes
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.
Class component 😂💯
Good content. I hope you’re getting enough rest. Don’t overwork yourself.
I'm not. I just always have bags. I sleep lots :)
Really cool thanks
Thanks
Nextjs 13 blew this approach into smithereens.
Thanks a lot
on your mac screen, there is a video called beakfast, please correct this spelling.🙃
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);
Now imagine if you could use this on iOS devices...
Why can't you? You can use PWAs on iOS devices :)
opppppppp ty spp good
Next : PWA with Sveltekit....
Great idea!
Wow
👍
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.
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
@@JamesQQuick plus there is the notifications part. idk if it's widely supported yet.
@@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.
@@breezystormatic827 websites can also send notifications. Most people choose to turn those off anyway, so that isn't a benefit either.
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.
Тут меньше воды и понятнее:
ruclips.net/video/ESiMRPOlLxU/видео.html
GOD bless, get saved from hell: repent of your sins and put your faith in the Lord Jesus Christ ✝💓
Mindboggling how clumsy and complex this is compared to angular, svelte, vue. React is really horrible
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
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.
Why not build real native apps? Don't you want your users to get the best possible app instead of a fancy website?
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
@@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.
Lol
err : ./node_modules/@nodelib/fs.scandir/out/adapters/fs.js:4:0
Module not found: Can't resolve 'fs'
after running the build command i am not getting sw.js in public folder why??
Thanks