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

let's talk about building pwas or progressive web apps with next js what's up everyone if you're new to the channel my name is james quick and i do weekly videos on web development related topics and in this video we're going to talk about building pwas or progressive web apps with nextgs i'm kind of excited for this video because it's actually the first on my new camera so i've got a new camera and a new setup i'm used to looking over here but that's uh mainly just exciting for me you probably don't care anyway uh the second thing for you to know is that this is a collaboration effort with a member of the learn build teach discord if you're interested in it you can find out more info at learnbuildteach.com right now i'll redirect you to the actual discord uh but avnish is a member of our discord and he's been writing a ton of articles and he said what if i write an article and you do a video and honestly that's a great deal for me so i'll have a link to his article below but we'll go ahead and walk through all the steps in this video as well to set up or create a pwa a progressive web app in nexgs but before we dive into the code let's take a quick look at what pwas are again it stands for progressive web apps and the benefit of a progressive web app is it's kind of a hybrid web and native application for your device so think about your mobile device like your iphone or an android device or even the desktop i'm on or on a laptop but it's a macbook or windows whatever it is mac or windows so in this case uh you can run these as relatively native looking applications you can have them as separate applications that run seemingly outside of the browser but they still kind of use the browser behind the scenes but you get to click on them and open them as individual icons which is really neat there's lots of extra features that come with this like offline support uh using service workers and a lot of that stuff we're not going to go super detailed into uh into what pwas are we'll mainly focus on how to create one but i'll show you a really good example here of a pwa first so you may not know this but the twitter app is actually a mobile or is actually a pwa which means if i open twitter i get this little download icon where i can download twitter to my machine so i can install twitter and then it actually opened on a new on a different uh terminal or a different monitor but here is twitter on my machine running seemingly outside of the browser although if you click on the extensions tab you can see that it's still kind of running in a browser environment with extensions there but it's its own thing so this means if i close this i can search and open now twitter just like any other app on my device on my machine this is really really cool that's a really good example of an amazing pwa that has tons of data and all kinds of cool stuff so i think that's probably enough what we should do now is go ahead and take a look at the code so let's go ahead and dive in all right so i'm inside of vs code i'm actually using the midnight synth theme so if you like it you can check out the video i did on it a few weeks ago but we're going to start by running an mpx command this allows us to run basically npn commands without installing the package itself we're going to use create next app to generate a new next application and then we'll just name it next pwa demo so i'll let that run and then we'll come back and open it up and get started all right so that looks like it's finished i'm going to open this folder up by doing code and then the name of the folder so this will be p or next pwa demo but i'm also going to do uh dash r which means uh reuse the current window that we're already open so i'm going to open this folder in the instance or window of vs code that's already open it's actually one of my favorite tricks so we should have a running next.js application if you open up your terminal if you're in vs code you can open it there or if you have a separate terminal that's fine too you should be able to run npm run dev just to start this up and show you that you have a next.js app running we don't have anything set up for pwas yet but we will go ahead and add that configuration here in a second so i'm going to scroll over to my browser and then open up localhost 3000 just to show you that we have a basic nexjs application working cool all right so the first thing we're going to do is we're going to actually use this next pwa package and this is a zero config pwa plug-in for nexjs it's got about 70 000 downloads and it actually is pretty nice so there's not a whole lot of work that we have to do but we can start by installing this package so i'm using npm here so i'm going to kill my server run an npm install of next pwa now while that's installing we're going to need to generate a manifest file for our application so the way uh the way pwas work is you have this manifest file with metadata about the application the browser can then interpret or read that information use it to kind of figure out what your application name description your icons and a few other things are so we'll start by doing this none of this stuff is like too too specific right now so let's do next pwa test and then uh display we're going to choose standalone i had browser by default and that did not work i'm not exactly sure why but i want to make sure we grab standalone here description a cool app short name is going to be uh next i think pwa test will work as well that should be fine and then we want to upload an icon all right so i just went online and found like the most random icon i could find are just like the first one i could find so i'm going to upload that so this is inside of my download folders and it's this 512 icon so we'll do that then we'll click the generate manifest and this is going to output a bunch of files for us we can unzip this and go and see what all is in there all right so let me i'm gonna make this not full screen and then we'll bring this folder over here with this manifest so you see we have a couple of different copies of those icons so uh different versions or different sizes of that same icon and then we have this manifest dot web manifest so we'll actually come back to that in a second but i'm going to grab all of these files and throw them into the public directory so this is where this is where the browser will know where to get this information for application but we'll need to rename this manifest.webmanifest to manifest.json because it's actually a json file so you see those are the same properties that we just worked with there is colors and display mode start url the name the description the short name and then a list of all those icons as well so those being inside of this public directory are accessible to the browser to know what to do with what now the next thing we need to do is actually tell the application where to find this manifest.json file so even though it's in the public directory we haven't actually told the application where to look in the public directory to get it so what we want to do is go into our pages directory and we have this app underscore app which basically wraps all of our different pages but we also now want to implement the underscore document uh file in next.js as well and this gives us the ability to kind of wrap an entire page including the head information if we want to so i'm going to copy in a snippet here let me make the this little bit bigger for us to see the entire thing and if we scroll up to the top we're importing these different pieces from uh next document html head main and next script and you can kind of you can type all this out or you can go to the blog post to copy the code directly the main thing that we're clarifying in here is the link to this manifest so we're saying we're linking to this manifest and it's at slash manifest.json now if you remember the public directory is publicly accessible inside of a next.js application in most applications so that is how we're able to tell the browser to go and get the manifest.json file from this file right here so we've got those two things connected up so we can close out the manifest save the document and close that and the next thing we'll need to do is actually configure nextgs to use that next pwa plugin so next.js comes with a next a plugin file next.config.js and we can start by grabbing the with pwa it looks like i'm not going to get intellisense but this is we're going to require this from next pwa so we'll grab this with pwa and it's basically a higher order function where we're going to wrap this whole export that we or excuse me this whole object that we export with this with uh not with api but with pwa sorry about that so with pwa there and then we're going to add a pwa configuration object in here and we'll have the dest the destination to be public so where those files going to live they're going to be in the public directory we'll set register to true and then we'll set skip waiting to true and you can go and look at all the different configuration options that you have inside of the library itself and there's one also that i wanted to add which will disable this let's see if i can come search for disable disable this if we're not in a deployed environment so if we're running in development we can go ahead and disable pwas we'll talk about how to test that here in a second all right so we'll save that and let's go ahead and run let's go ahead and run a build in here so npm run build uh this should take all the configuration and stuff it should grab the information from the manifest.json and it should actually build this as a pwa so we'll give this a second to build and then we'll come back and take a look at what we got all right so that build has finished and if we scroll back up notice it's working with a service worker this is the sw.js here so service workers can be used to do like offline access and a bunch of other things with pwas so it's working with uh with that thing that's that's one signal to let it know that it is actually picking up on the fact that this is a pwa it did the entire build and then notice that uh all of these files are going to be static so uh nextjs actually gives you a cool little key here of what files are static server side rendered and [Music] static regular static pages ssg using git static prop server side rendered with git server side props and then i've got incremental static regeneration which is a whole another topic so it looks like that is working and what we can do is go ahead and run an npm run start and this should go ahead and run this in a way that we can be able to test but i've got the other demo running already so let me close that one and now let's do npm run start so this should go ahead and start this up and uh we should be able to see this in the browser and view it as a pwa which is actually pretty neat so let's take a look in the browser here let's go back to localhost 3000 and if we refresh this page notice everything looks the same but now we have this little button here that says install next pwa now this is actually really cool because i can go ahead and install this thing it went over to a new uh new term or a new uh monitor let me bring it over here so this is the app running as a native mac app now here's the really cool thing now if i do command space i use something called raycast that replaces like the search the spotlight stuff in mac but if i search in here now for next pwa that's that application so i can actually close this i can search for next pwa it's going to open that application on the wrong monitor again of course let me drag it over so it's actually opening that as a regular application on mac so this is the the benefit the beauty of having this uh is now this is basically looking like a dedicated uh app on mac it's pretty cool stuff i think now one of the things that happens is when we do that build uh notice we have a few different extra files in here that we want to not check those into source code source control and the reason is that typically you don't check code into your public directory because you don't if you need to update them you don't want them to be cached if they're in the public directory so we'll usually try to ignore all those and we've got amnesia has come up with a set of files inside of here that we can that we can ignore so we want to ignore service worker worker stuff basically all the worker stuff here so depending on what sort of build it does we want to make sure we just ignore all those files and don't check them in so we'll just save that and now notice that these couple of files are now grayed out so we make sure that those won't go uh in a deployment to our uh to our deployed version it will be built real time and then those files will be generated and inside of the public directory all right so that's the basics of setting up a pwa a progressive web app with next.js if you're interested in learning more and you need more resources one go check out the article by abnesh if you're looking for just the written form but also i've done a little bit of research for you in terms of videos uh there's a video here from max programming or usman who is part of our learn build teach discord as well on setting up a nexus next js app pwa with offline support as well so he gets into offline support which i think is worth checking out and then also on the fire ship channel which is one of the most amazing channels on youtube they have a progressive web apps in 100 seconds and beyond so they do the 100 second thing and then give you a little bit of hands-on portion after that anyways if you enjoyed the video and you'd like to see me do more content from other people transformed into videos let me know what sort of topics you might be interested in hope you enjoyed it in the meantime i'll catch you next time

Channel: James Q Quick

Views: 28,276

Keywords: progressive web app, next js, next pwa, next js tutorial, pwa react js, progressive web app tutorial, web development, javascript, web development tutorial, how to build a pwa with nextjs, what is a pwa, pwa reactjs tutorial

Id: ARNN_zmrwcw

Length: 13min 7sec (787 seconds)

Published: Tue Oct 05 2021