Awesome
<img src="assets/cover.jpg" alt="cover"> <div align="center"> <h1>ā”ļø create-next-pwa</h1> <img src="https://img.shields.io/npm/v/create-next-pwa?color=%23000000" alt="version"> <img src="https://img.shields.io/npm/dt/create-next-pwa?color=%23000000" alt="downloads"> <img src="https://img.shields.io/npm/l/create-next-pwa?color=%23000000" alt="license"> <a href="https://stars.github.com/nominate/"> <img src="https://img.shields.io/badge/GitHub%20Star-Nominate%20%40msaaddev-%23000000" alt="nominate @msaaddev for GitHub Star" /> </a> </div> <br> <div align="center"><strong>A cross-platform Node.js based CLI tool that creates Progressive Web App (PWA) with Next.js. You can also integrate tailwind with the Next.js PWA using this CLI with a single command.</strong>
</div>- Simple: One command Next.js Progressive Web App setup
- Cross-platform: Works on all available operating systems including Linux, macOS, and Windows
- Support: Also supports TypeScript Next.js PWA with
--typescript
flag - Tailwind: Instantly integrate Tailwind using
--tailwind
flag in your Next.js PWA. - Prettier: Integrated Prettier to easily format the code with
npm run format
- MIT Licensed: Free to use for personal and commercial use.
Note: If you are on Windows, make sure to either use Command Prompt or Windows Powershell to run the CLI.
š¦ Installation
# install the CLI globally
npm i -g create-next-pwa
# use it with npx (recommended)
npx create-next-pwa [app_name]
š Usage
Navigate to the folder you want to have your Next.js PWA.
# using npx
npx create-next-pwa@latest [app_name]
# if you have installed globally
create-next-pwa [app_name]
# to use Next.js with Typescript
create-next-pwa [app_name] --typescript
# Next.js PWA with tailwind integration using npx
npx create-next-pwa@latest [app_name] --tailwind
# Next.js PWA with tailwind integration if you have globally installed the CLI
create-next-pwa [app_name] --tailwind
# without giving app name in terminal using npx
npx create-next-pwa@latest
# without giving app name in terminal using npx and tailwind integration
npx create-next-pwa@latest --tailwind
# without giving app name in terminal if installed globally
create-next-pwa
# without giving app name in terminal if install globally along with tailwind integration
create-next-pwa --tailwind
š© Demo
# using npx
npx create-next-pwa [app_name]
<img src="assets/usage-3.gif" alt="with npx">
# integrate tailwind in the Next.js PWA
npx create-next-pwa [app_name] --tailwind
<img src="assets/usage-4.gif" alt="integration of tailwind">
# if you have installed globally
create-next-pwa [app_name]
<img src="assets/usage-1.gif" alt="usage with app name">
# you can also just use the create-next-pwa command
create-next-pwa
<img src="assets/usage-2.gif" alt="usage without app name">
šØš»āš» Contributing
Make sure you read the contributing guidelines before opening a PR. If you want something else to integrate with the CLI like I have done with tailwind, open an issue in the repository and I will get back to it.
ā”ļø Other Projects
I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.
š License & Conduct
- MIT Ā© Saad Irfan
- Code of Conduct