Build a PWA with Next.js to achieve 100% lighthouse score

This article covers how we can build a Progressive Web Application with Next.js (React.js) that achieves a 100% score in Google Lighthouse.

Lighthouse report with fireworks on 100% score

Why Google Lighthouse?

Lighthouse becomes a standard in website performance measurement. It is an automated tool for improving the quality of sites in which we can run the auditing in the Lighthouse tab of Chrome DevTools. It covers performance, accessibility, progressive web apps, SEO, and more.

Next.js

Next.js is an excellent React Framework with server-side rendering capabilities for better SEO and all other features we need for production. We can also build AMP pages with minimal configurations and support Static Site Generation.

Let’s start!

The repository of the project is here and the application is hosted at https://nextjs-100.vercel.app/.

Create Next.js application

First of all, we need to create a Next.js application. Let’s follow the official document to get started.

$ yarn create next-app nextjs-100
$ cd nextjs-100
$ yarn dev