Create a Next.js based PWA With Tailwind — create-next-pwa

#nextjs #pwa #tailwindcss #javascript

So a couple of days back, I started learning about Progressive Web Apps (PWA) and how they make your web app a standalone desktop application and sort of like an android application. I was really intrigued by the whole concept. I knew about PWAs before but I have never experimented with them. And this time, I decided to do just that.

So to indulge in my curiosity, I went ahead and created a Next.js app with create-next-app. And afterward, I started making all the changes in the code that were required for a PWA. In the end, I was successful but it took me some time since I was coming from a background where I had no experience with PWAs.

Later I decided to use Tailwind for my project. I looked up its documentation and followed all the steps I needed to perform to set up Tailwind in my Next.js application. And here again, I spent some time figuring out what to do and what not to do.

After going through all this, figuring stuff out, I realized that some kind of automation tool can come in real handy when doing all these configurations. And that is when I started building create-next-pwa. 🏗

⚡️ CREATE-NEXT-PWA

create-next-pwa is an extremely lightweight, zero-configuration Node.js-based CLI tool that I have built to automate everything I have talked about above. It can set up your Next.js PWA with a single command:

npx create-next-pwa@latest [app_name]

If you want to set up Tailwind for your PWA, you can easily do this with create-next-pwa with a single --tailwind flag like this:

npx create-next-pwa@latest [app_name] --tailwind

I have also integrated Prettier as a dev dependency in the PWA. It means you can format your entire project when you are building your PWA by just running:

npm run format

Everything you needed to do before in order to set up a Next.js-based PWA with or without Tailwind can now be done with a single command. How awesome is that?! 🥂

If you still want to set up Next.js-based PWA by yourself, I would then recommend reading this awesome article by Eshwaren. And on top of this to integrate tailwind, you can follow the official documentation.

🙌🏻 WRAP UP

If you folks want me to integrate something else like I have integrated Tailwind then open an issue in the repository and I will get back to you. Also if you like this application, be sure to star it as well. 😉

Cheerios ✌🏻