Nitro

Nitro is a free and open-source Progressive Web App (PWA) boilerplate that combines Next.js, Material-UI, TypeScript, and Auth0 to provide a ready-to-run foundation for authenticated web applications.

What is Nitro?

Nitro is a boilerplate example repository created by GitHub user williamluke4, showcasing how to build a Progressive Web App (PWA) with Next.js, Material-UI, TypeScript, and Auth0. It takes a fresh clone of the repository and, after installing dependencies with npm or yarn and configuring Auth0 credentials, produces a running Next.js application with client-side authentication and PWA capabilities. The project runs on the Next.js framework and is designed to be extended into a full production application.

Key Features

• Next.js framework — Nitro uses the React-based Next.js framework for server-side rendering, static generation, and file-based routing, giving developers a modern foundation for web apps.
• Material-UI styling — The UI is built with Material-UI (MUI), a popular React component library that implements Google's Material Design, providing pre-built components and theming.
• TypeScript support — The entire codebase is written in TypeScript, offering static type checking and better developer tooling for scalable applications.
• Auth0 authentication — The boilerplate integrates with Auth0 for authentication, using the useAuth library by atto-byte to manage login, logout, and protected routes.
• Progressive Web App (PWA) — Nitro is set up as a PWA example, meaning it is designed to support offline capabilities and can be installed on users' devices.
• NPM and Yarn compatible — The repository includes instructions for both npm and yarn package managers, with separate commands for development and production builds.

Who is Nitro for?

Nitro is aimed at developers who want to start a new web application without setting up authentication and UI from scratch. React and Next.js developers looking to integrate Auth0 with Material-UI and TypeScript will find it a useful reference. It also serves as a learning resource for those building PWAs with modern React tooling.

What can you do with Nitro?

• Start a new authenticated app — Clone the repository, run yarn && yarn dev or npm install && npm run dev, and get a running Next.js app with Auth0 login pages ready to customize.
• Learn PWA implementation — Use Nitro as a reference for how to set up a progressive web app with Next.js, including service workers and offline support.
• Extend into production — Build on top of the boilerplate to create a business website, customer portal, or internal tool that requires secure login and a Material Design UI.

How does Nitro work?

Nitro works as a standard Next.js application. After cloning the repository and installing dependencies, you configure your Auth0 credentials in a .env file (as highlighted in the setup instructions). Running npm run dev or yarn dev starts the development server, while npm run build && npm run start or yarn build && yarn start builds and serves the production version.

FAQ

Is Nitro free?

Yes, Nitro is a free and open-source boilerplate. The entire source code is publicly available on GitHub, and you can clone, modify, and use it in your own projects. The repository also welcomes pull requests, encouraging community contributions.

What auth provider does Nitro use?

Nitro uses Auth0 for authentication. It leverages the useAuth library by atto-byte, which is designed for Auth0 integration in Next.js applications. You will need to create an Auth0 account and configure your credentials to use the login features.

What UI library is used in Nitro?

Nitro uses Material-UI (MUI) as its styling and component library. This gives the app access to pre-built React components like buttons, menus, and forms, along with Material Design theming and responsive layout capabilities.

What are the prerequisites for running Nitro?

To run Nitro locally, you need Node.js and npm or yarn installed on your machine. Additionally, you need an Auth0 account to set up authentication, and the setup instructions recommend adding your .env file to .gitignore before adding secrets.