Next.js + styled-components + react-styled-flexboxgrid => Responsive PWA
Responsive web applications adjust website content and layout using CSS media queries according to factors such as device platform, screen size, and orientation. It should be able to display content on devices as varied as smartphones, tablets, and desktops without any user interface breaks.
In this story, we are going to build a progressive web application using CSS media queries responding to different screen width.
1. Setup a Next.js application
Instead of starting a new Next.js application from scratch, I make use of nextjs-100 repository as a boilerplate for this post. This repository is set up with a basic configuration of a progressive web application that achieved 100% lighthouse score.
Please read the story below about the details on how to set this up in case you missed it.
