Nextjs Frontend Boilerplate

Nextjs Frontend Boilerplate is a production-ready Next.js starter template that bundles MUI theming, TypeScript, PWA support, internationalization, and CI/CD tooling for immediate app development.

What is Nextjs Frontend Boilerplate?

Nextjs Frontend Boilerplate is an open-source GitHub project by arrofirezasatria that provides a complete Next.js project scaffold with Material UI (MUI) styling, TypeScript, SEO optimization, PWA support, and internationalization built in. It takes a fresh Next.js application and layers on a structured directory, automated E2E testing, and development tooling so you can focus on building features instead of configuring infrastructure. The template runs on Node.js and includes a one-click deployment button for Vercel.

Key Features

• Next.js and TypeScript — Uses the Next.js React framework with TypeScript for type safety, enabling server-side rendering and static site generation.
• MUI theming with dark mode — Material UI is the component library, with a custom theme defined in src/modules/brandingTheme.ts that includes a dark theme.
• Internationalization — Configured through i18n.js with locale JSON files in public/locales for multi-language support.
• PWA and SEO — Progressive web app capabilities and SEO best practices are preconfigured to maximize Lighthouse scores, with sitemap generation via next-sitemap.
• E2E testing with Cypress — A cypress directory holds end-to-end test configuration for verifying user flows.
• Developer tooling — Husky pre-commit hooks, Commitlint commit message linter, and Prettier code formatter are preinstalled; VSCode settings are included; absolute imports use the @ prefix.
• CI/CD with GitHub Actions — A .github/workflow folder provides a starting point for automating builds and deployments.

Who is it for?

• Next.js developers who want a preconfigured project with MUI, TypeScript, and testing instead of spending hours on boilerplate setup.
• Startup teams that need a production-ready frontend with PWA, SEO, and i18n already wired to ship a minimal viable product quickly.
• Agency developers building multiple client sites who can clone the repo, run npm install, and start customizing the layout and theme immediately.

What can you do with it?

• Launch a new web app — Clone the repo, run npm run dev for live reload in development, then deploy to Vercel with the one-click deployment link.
• Build a multi-language site — Use the public/locales JSON files and the i18n.js config to display content in multiple languages.
• Set up continuous integration — Extend the GitHub Actions workflow to run automated tests on commits and deploy on merges.

How does it work?

Clone the repository to your local machine with git clone, install dependencies with npm install, and start the development server with npm run dev. The template also supports one-click deployment through Vercel and one-click development environments through Gitpod.

FAQ

Is this boilerplate free to use?

Yes, the project is an open-source GitHub repository, so you can clone and use it without cost.

Does it include TypeScript?

Yes, TypeScript is configured in tsconfig.json, and reusable types are stored in lib/types.

What styling solution does it use?

It uses Material UI (MUI) with a custom theme in src/modules/brandingTheme.ts, and it also includes a tailwind.config.js file at the root.

Can I deploy it to Vercel?

Yes, the README provides a one-click Vercel deployment button that clones the repository and automatically sets up the project.