NextJS Progressive Web App
Tags: nextjs, pwa, react, ssr
Published: 2020-03-17 07:36:54

> 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](https://nextjs.org/), we install it and run it as the following code:

```javascript
"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](https://create-react-app.dev/)? The question is pretty straightforward, if you wanna have [server side rendering](https://alligator.io/react/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](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) your project and(or) using other libraries, such as [react-app-rewired](https://www.npmjs.com/package/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:

```javascript
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](https://eloquentjavascript.net/05_higher_order.html) we add the desired functionality! Too fast? Let’s digest this properly.

First thing first, have a look on this [dummy example](https://cocky-raman-3845d9.netlify.com/) (if you wanna fully experience all features, use chrome, nothing against the others, but while I’m writing this article, [progressive web app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) 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:

![Saved assets](https://dev-to-uploads.s3.amazonaws.com/i/kofd945yxe9xbzb3bjyb.png)

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

![Installable option](https://dev-to-uploads.s3.amazonaws.com/i/d5pthd7812c5bi48zzry.png)

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

![Server side rendering](https://dev-to-uploads.s3.amazonaws.com/i/m59pwvau04rmarhie3ot.png)

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.

![Server side rendering](https://dev-to-uploads.s3.amazonaws.com/i/jwrdaqfxphbdamskganx.png)  

But then now it comes the question, how is that done? Tired of reading? Go directly to what matters: [the code](https://github.com/vanderleisilva/next-pwa)!

The implementation is as [NextJS](https://nextjs.org/) project, using [MaterialUI](https://material-ui.com/) for the interface elements, [Typescript](https://www.typescriptlang.org/) for type checking, [next-pwa](https://www.npmjs.com/package/next-pwa) a next plugin for the progressive web app functionalities and a quick bonus, check [this code](https://github.com/vanderleisilva/next-pwa/blob/master/pages/my-mdx.mdx). An MDX support for next provided by [next-mdx](https://github.com/zeit/next.js/tree/canary/packages/next-mdx).

If you look at the code you may notice the absence of a routing coding, a [react-router](https://reacttraining.com/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:

![Routing](https://dev-to-uploads.s3.amazonaws.com/i/286c0v65mrz3u24nek6i.png)

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!