NextJS Progressive Web App

What if we could quickly setup a progressive web app, with server side rendering and routing mechanism out of the box? Would that sound interesting? That’s why you here, stick with me and enjoy the road.

It all starts with NextJS, we install it and run it as the following code:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
},

The first question that come up is why would we go to a different approach to start a react project other then create-react-app? The question is pretty straightforward, if you wanna have server side rendering and a better and easy way to work offline. You not sure? Here it goes …

create-react-app comes out of the box with an offline support, however it’s restricted in how stores locally its assets. It restricts us to the generated assets (js, css, images, fonts ...), however what if you also wanna store CDN files, backend apis, system specific routing? How would go there, probably ejecting your project and(or) using other libraries, such as react-app-rewired, but at the end these approaches soon or late end up adding more complexity to your code and more code to maintain .. Anyway why would you enjoy maintaining custom script building systems?

Now take a look at this code:

const isProd = process.env.NODE_ENV === "production";

const withPWA = require("next-pwa")

module.exports = withPWA({
 pwa: {
   disable: !isProd,
   dest: "public"
 }
})

With a simple higher order function we add the desired functionality! Too fast? Let’s digest this properly.

First thing first, have a look on this dummy example (if you wanna fully experience all features, use chrome, nothing against the others, but while I’m writing this article, progressive web app functionalities are still a work in progress and the installable option of our app will not work on them)

Once you there, open the developer tools and check while you navigate and/or refresh the pages, the resource (js, css, fonts, api calls ..) are being locally saved:

Check also on the plus icon right after the website url bar:

And if you inspect the network tab, you’ll see that the initial load comes with all your app already rendered from your server .. :)

That’s it, these are the user functionalities of our dummy app, disable the internet connection and then you can see a friendly message saying that there is no connection and the app still working.

But then now it comes the question, how is that done? Tired of reading? Go directly to what matters: the code!

The implementation is as NextJS project, using MaterialUI for the interface elements, Typescript for type checking, next-pwa a next plugin for the progressive web app functionalities and a quick bonus, check this code. An MDX support for next provided by next-mdx.

If you look at the code you may notice the absence of a routing coding, a react-router or similar, that’s NextJS in action, it gives an automatic routing system, just put your routes under page folder and the routing is done:

Wondering how does it work and how is that done, check here: https://nextjs.org/docs/routing/introduction

Here we can clearly see how easy can be set a project with advanced feature just by choosing the right tools, because at the end, the heavy work of a developer is not developing thing and yes choosing the right tools for what we need.

There is so many nice wheels to be used, why would we create our owns? Let’s grab them and construct our beautiful cars!