Provides both a collapsible desktop sidebar and two mobile layouts (swipe sidebar or bottom menu)
Next.jsReactStarter
nextjs-material-pwa — Next.js Starter Template
By ivandotv
A progressive web app starter template built on Next.js, Material UI and Workbox, including responsive layouts, theme switching, onboarding slides and Service Worker offline support.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-02View source
What stands out
A quick read of the recorded project description.
Includes built-in dark and light themes that can be customized
Includes an optional onboarding slideshow that can be removed
Service Worker based on Workbox precaches routes, images, CSS and Google Fonts, and prompts a reload after updates
Provides an offline fallback page and network offline detection notifications
Custom Babel configuration can inject compile-time environment variables such as version, build date and commit SHA
Template Details
This template is for building progressive web apps (PWAs) with a technology stack of Next.js, Material UI and Workbox. The repository is positioned as a starter, intended by its author for quickly beginning PWA projects and keeping them updated.
On the interface side, the app supports both desktop and mobile layouts. On desktop there is a collapsible sidebar on the left; on mobile two options are provided: a swipe-to-open sidebar, or a modern layout with menu items at the bottom. The theme includes dark and light variants that can be customized. The template also includes an onboarding slideshow common in native apps; this part is optional and can be removed.
PWA capabilities center on the Service Worker: sw.js is written in TypeScript and compiled alongside the rest of the code. It precaches routes, images, CSS and Google Fonts, and generates a new cache manifest on each build. After the Service Worker installs, the app prompts a reload so the new version can take over. When offline, navigation shows an offline fallback page; the fallback file must be plain HTML, CSS and JS and placed in the public directory. Network offline detection is also provided, showing an in-app notification when the connection drops. The template includes a custom install prompt, but it works only on desktop systems and Android, not iOS; it also sets up several demo app shortcuts that appear after installation.
For build configuration, the template includes a custom Babel configuration that can inject compile-time environment variables such as __VERSION__, __DEV__, __BUILD_DATE__, __COMMIT_SHA__, __BRANCH__ and __COMMIT_MESSAGE__. If these variables are not needed, the configuration can be removed and the Next.js compiler used instead to improve compilation speed.
Limitations and notes: the install prompt does not support iOS; the offline fallback page cannot use React or CSS-in-JS libraries; demo images and slideshow assets come from third-party sites and must be checked against their respective licenses.
Next.jsStarter
Is it right for your project?
Use Cases
- Adding PWA capabilities to a Next.js project (offline access, install prompt, app shortcuts)
- Quickly building an application interface with Material UI that adapts to both desktop and mobile
- Needing dark/light theme switching and a native-style onboarding page
- Injecting compile-time constants such as version number and commit information during the build stage
Suitable For
- Front-end projects using Next.js and Material UI
- Web applications needing Service Worker and offline support
- Prototypes or products that want to reuse responsive layouts and theme solutions
- Developers who accept the MIT license and need to retain the copyright notice
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
The install prompt works only on desktop systems and Android, not iOS
- 2
The offline fallback file must be plain HTML, CSS and JS and placed in the public directory
- 3
If the environment variables injected by the custom Babel configuration are not needed, it can be removed and the Next.js compiler used instead to improve compilation speed
- 4
Demo images and slideshow assets come from third-party sites; check their respective licenses before use
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version of a public repository under the MIT license; the free scope is the code of this version and does not imply that external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercially use and distribute the code of this version for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The app install prompt works only on desktop operating systems and Android; iOS does not support this feature.
- The offline fallback page file must be plain HTML, CSS and JS; React or CSS-in-JS libraries cannot be used.
- Demo image assets come from the third-party site flexiple.com and must be used under their own license.
- Onboarding slideshow images come from the third-party site pixeltrue.com and must be used under their own license.
- Demo images, fonts, icons and other third-party assets must be checked against their respective licenses; the MIT license of the code alone is not sufficient to judge.
- External services such as domains, hosting, databases, payments or AI may incur separate charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
the installation prompt only works on the desktop OS'es and Android, no IOS
Original README
the fallback files must be pure html,css, and js (no react, or css-in-js libraries)
Original README
Image credits [flexiple.com](https://2.flexiple.com/scale/all-illustrations?search=app)
Original README
https://github.com/ivandotv/nextjs-material-pwa/blob/master/LICENSEhttps://github.com/ivandotv/nextjs-material-pwa/blob/master/README.mdSlideshow images: [pixeltrue.com](https://www.pixeltrue.com/free-packs/lined-illustrations)
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- Next.js · React
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-07-21
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: e8633c1d3f27971d60eb578407f41fb2b9542e6ea1ba6f7789d58f5df683fa75
2026-10-02T20:46:26.718Z
Source file / repository# Nextjs Material UI Progressive Web App (PWA) Template Template for creating progressive web apps with [MaterialUI](https://mui.com/), [Next.js](https://nextjs.org/) and [Workbox](https://developer.chrome.com/docs/workbox/) Working demo: https://material-pwa.vercel.app/ <!-- toc --> - [Motivation](#motivation) - [Layout](#layout) - [Theming](#theming) - [Onboarding slideshow](#onboarding-slideshow) - [Service worker](#service-worker) * [service worker setup](#service-worker-setup) * [offline fallback](#offline-fallback) * [installation prompt](#installation-prompt) * [app shortcuts](#app-shortcuts) - [Custom Babel.js config](#custom-babeljs-config) - [Future](#future) - [Blog post](#blog-post) - [Useful links](#useful-links) - [License](#license) <!-- tocstop --> ## Motivation Setting up PWA's involves a lot of moving parts, so I've decided to create a template repository, that I would always keep up to date, and it will enable me to get started quickly. ## Layout The application supports both desktop and mobile layouts. The desktop layout has a sidebar on the left side that can open and close.  The mobile layout has two options. - Traditional layout with a sidebar that can be swiped to open/close  - Modern layout where menu items are at the bottom  ## Theming - There are two themes dark and light, and they can easily be customized. ## Onboarding slideshow I've also included an onboarding slideshow which is usually present in native apps. This is optional and it can easily be removed. https://user-images.githubusercontent.com/390700/174054384-3eeb975b-c39a-414a-a93c-48f6fbfefd7b.mp4 ## Service worker The real hard part of creating pwa's is service worker integration, both in the build process and in production. Service worker functionality is implemented with the excellent [Workbox library](https://developer.chrome.com/docs/workbox/) ### service worker setup - Service worker [`sw.js`](./src/lib/client/service-worker/sw.ts) is written in Typescript and it will be compiled together with the rest of the code. The service worker will precache all the routes, images, CSS, and google fonts. Every time the app is built new cache manifest is created. When the service worker is installed, the application will show a prompt to reload the application so the new service worker can take over. ### offline fallback Offline fallback is provided, if `navigation` happens when there is no network access, the fallback page will be shown. Please note that the fallback files must be pure html,css, and js (no react, or css-in-js libraries). Fallback files need to be placed in the `public` directory. Also, there is `network offline` detection, if the browser loses network connection, there will be a notification inside the app that the application is offline. You can test this via the Chrome dev tools network tab. ### installation prompt The application also has a custom prompt for the installation of the app. Please note that the installation prompt only works on the desktop OS'es and Android, no IOS. ### app shortcuts The application also has set some demo shortcuts which show up if the application is installed. You can read more about PWA Shortcuts at [Get things done quickly with app shortcuts](https://web.dev/app-shortcuts/)  ## Custom Babel.js config There is a custom babel configuration, that enables you to have a couple of custom `env` var that can be used when compiling the application: - `__VERSION__`: app version, taken from `package.json` version, - `__DEV__`: `true` if the application is running in dev mode - `__BUILD_DATE__`: app build date taken from the git commit - `__COMMIT_SHA__`: git commit sha - `__BRANCH__`: branch name, - `__COMMIT_MESSAGE__`: git commit message If you don't need these `env` variables, you can remove the babel config and use [Next.js compiler](https://nextjs.org/docs/advanced-features/compiler) which will increase compilation speed. ## Future This template will be kept up to date. In the future, I might create similar templates for [Mantine library](https://mantine.dev/) and [Chakra-UI](https://chakra-ui.com/) If you have suggestions on how this process could be improved, feel free to open an issue or pull a request. ## Blog post I will eventually write a blog post detailing the whole setup process. You can follow me on [Twitter](https://twitter.com/iki_xx) or on [Dev.to](https://dev.to/ivandotv) to be notified of new blog posts. ## Useful links If you want to learn more about how to create progressive web apps with a great user experience, check out these links: - [learn pwa](https://web.dev/learn/pwa/) - [30 days of PWA](https://blogs.windows.com/msedgedev/2022/04/14/30-days-of-pwa-fall-in-love-with-progressive-web-apps/) - [service worker lifecycle](https://web.dev/service-worker-lifecycle/) - [pwa icon generator](https://maskable.app/) - [responsively application](https://responsively.app/) - [samsung remote test lab](https://developer.samsung.com/remote-test-lab) ## License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details Image credits [flexiple.com](https://2.flexiple.com/scale/all-illustrations?search=app) Slideshow images: [pixeltrue.com](https://www.pixeltrue.com/free-packs/lined-illustrations)
Explore similar templates
Compare previews and descriptions within the same stack and category.
Next.js SaaS Starter
The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.
Next.js · SaaS
Next.js Commerce
Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.
Next.js · E-commerce
Next-js-Boilerplate
A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.
Next.js · Starter
tailwind-nextjs-starter-blog
A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.
Next.js · Blog
next-forge
next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.
Next.js · Starter
SaaS-Boilerplate
SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.
Next.js · SaaS