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

Подписаться 201 тыс.

Просмотров 104 тыс.

50% 1

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

Опубликовано:

4 окт 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 157

@thebuildguy7 Год назад

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

@avneesh0612 2 года назад

This was a very fun collab :D

@michelgerges2678 2 года назад

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

@MaxProgramming 2 года назад

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

@ai_coding Год назад

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

@MaxProgramming 2 года назад

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 2 года назад

Ahhhh amazing. So glad I did!!

@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 11 месяцев назад

Genius!

@angel-pu7su 2 года назад

Thanks James and Avneesh for the great tutorial.

@IvoTsochev 2 года назад

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

@JamesQQuick 2 года назад

Yayyyyy

@jonatanramhoj 2 года назад

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?

@tushar.musique 2 года назад

Very helpful. Learned a new thing today.

@MiaUniversity Месяц назад

WOW, THIS TUTORIAL IS REALLY WORKS!

@aggbits 2 года назад

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

@PaulBilton 2 года назад

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

@semiloreidowu4601 2 года назад

This is very cool, definitely trying it out immediately

@JamesQQuick 2 года назад

Yay!

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

@andressalomon6703 2 года назад

Great video!! Thank you very much James!

@JamesQQuick 2 года назад

Yayyyy

@ioanasbogdan 2 года назад

what are you using to get the autocomplete on terminal?

@intuitivamkt 2 года назад

What camera re you using? I like the setup!

2 года назад

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 2 года назад

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

@palina_live Год назад

Thank you so much for the clear explanation! 😀

@JamesQQuick Год назад

So glad this helped!

@geekySRM 2 года назад

This is awesome!

@shoebilyas9664 2 года назад

A very well explanation. Thanks a lot :).

@jeanchrinot 3 месяца назад

I implemented this. It is amazing.

@sonwander1 Год назад

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

@mhayk 2 года назад

Very helpful. Thank you !

@JamesQQuick 2 года назад

Glad you enjoyed it!!

@preciousegwuenu2938 6 месяцев назад

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.

@suleman234 2 года назад

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

@ronnyjubhari9042 2 года назад

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?

@adarshrathi8265 2 года назад

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

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

@sinashohrat2353 2 года назад

this was helpful ty

@nikoreva2078 2 года назад

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?

@tapasadhikary 2 года назад

This is cool. Thanks for sharing.

@JamesQQuick 2 года назад

Glad you enjoyed it!

@dawid_dahl Год назад

Awesome, thanks!

@z1982_ 3 месяца назад

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

@vishnudarshan4762 2 года назад

Need a video on how you setup your terminal, please

@metamedian 2 года назад

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.

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

@blazi_0 2 года назад

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

@aayamshrestha5982 2 года назад

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

@mdkutubail8848 10 месяцев назад

thanks broo it was very helpful for me

@felixmenendez 2 года назад

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

@JamesQQuick 2 года назад

Not that I know of but maybe…?

@gordgood6506 2 года назад

You saved my arse man. Love you.

@TheIguana3d Год назад

wow, thank you very much!

@eronmonseleoaikhina5832 2 года назад

which extension is your visual studio using @James Q Quick

@hectordnc 10 месяцев назад

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?

@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

@aerotheory 2 года назад

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

@JamesQQuick 2 года назад

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

@tagecc5280 2 года назад

@@JamesQQuick nice

@webpapi 2 года назад

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 2 года назад

Is it solved?

@xHeroinBoBx 2 года назад

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

@sarcasticdna 2 года назад

Extension name is import-cost I guess

@krystianwojtowicz9305 3 месяца назад

how to cache pages for when off line?

@mustadirmahmood6271 2 месяца назад

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

@mateuspamaral00 Год назад

Really cool thanks

@chiranthmjain7940 8 месяцев назад

is there any possibility to remove ellipsis from PWA MicrosoftEdge?

@webloom7345 2 года назад

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

@Chems-eddineSediri 5 месяцев назад

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

@denniszenanywhere 2 года назад

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 2 года назад

that's a superb idea

@paul-gerhardsiegel7065 3 месяца назад

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

@utkarshsrivastav3039 6 месяцев назад

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

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

@imvolkankaban 2 года назад

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

@JamesQQuick 2 года назад

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

@davidbobadilla2323 2 года назад

Is that a Superantural poster?

@vascorebolo 2 года назад

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 2 года назад

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

@franciscoramos8381 2 года назад

Same here 😢

@d8mle 2 года назад

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.

@cbc911 2 года назад

What icon pack are you using?

@JamesQQuick 2 года назад

Vs code icons I believe.

@krtirtho 2 года назад

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

@JamesQQuick 2 года назад

It’s an app called fig :)

@krtirtho 2 года назад

@@JamesQQuick Thanks for letting me know

@bushigi5913 2 года назад

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 2 года назад

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 2 года назад

You must be new lol

@bushigi5913 2 года назад

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

@jopercito Год назад

no working in next js 13 ?

@unpluggedaman 2 года назад

Thanks a lot

@thearong_5853 2 года назад

with typescript i got error and not working

@angel-pu7su 2 года назад

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.

@tegasteve8195 5 месяцев назад

Thanks

@VKD007 2 года назад

Class component 😂💯

@johnyepthomi892 2 года назад

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

@JamesQQuick 2 года назад

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

@SHARMATUSHAR1_ 6 месяцев назад

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

@alvidervishaj231 2 года назад

How do you get auto complete in terminal ?

@chaseharrison7002 2 года назад

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 2 года назад

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

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

@mohamedboularas6480 Год назад

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

@ihechikaraav 2 года назад

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

@JamesQQuick 2 года назад

Sure email me at james.q.quick@gmail.com

@LarsRyeJeppesen 2 года назад

Build fails, missing error pages

@angel-pu7su 2 года назад

@warrior_pk 8 месяцев назад

It works on desktop but not on phone

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

@yashchauhan5710 2 года назад

opppppppp ty spp good

@michaelklit7799 5 месяцев назад

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

@slavenDj 4 месяца назад

u are probaly using app routes instead of page routes

@michaelklit7799 4 месяца назад

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.

@familyiseverything1617 2 года назад

Wow

@loveboat Год назад

Nextjs 13 blew this approach into smithereens.

@hasindusithmin1074 2 года назад

👍

@shinjansaha240 7 дней назад

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

@us28363hdhd Год назад

2:48 video starts here

@JamesQQuick Год назад

Thanks for sharing

@TorgeirFredriksen 2 года назад

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

@JamesQQuick 2 года назад

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

@mdbillalyasir Год назад

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

@apriliandi__ 2 года назад

Next : PWA with Sveltekit....

@JamesQQuick 2 года назад

Great idea!

@ZXZXZXZvvvZXZXZXZ 2 года назад

Тут меньше воды и понятнее: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ESiMRPOlLxU.html

@seesmof 27 дней назад

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

@LarsRyeJeppesen 2 года назад

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

@blazi_0 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

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

@StijnHommes 2 года назад

@@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 2 года назад

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

@StijnHommes 2 года назад

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.

@StijnHommes 2 года назад

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

@JamesQQuick 2 года назад

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 2 года назад

@@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 2 года назад

Lol

@StijnHommes 2 года назад

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.