Next-Plate

Next-Plate is a ready-to-use Next.js starter template that ships with TypeScript, Chakra-UI, and a complete set of pre-configured development tools for building React applications. The project, created by gmatthewsfeuer, is open source under the MIT License and features a live demo at next-plate.vercel.app, where users can preview the template before deploying their own copy.

What is Next-Plate?

Next-Plate is a boilerplate template for Next.js projects that combines hybrid rendering, TypeScript, and a curated set of libraries. As a GitHub template, it takes a new repository name and generates a full project structure containing example pages, services, stores, and configurations. The output is a runnable Next.js application with a Chakra-UI design system, Jest tests, and PWA support. It is developed by gmatthewsfeuer and documented in English, Brazilian Portuguese, and Korean.

Key Features

Next-Plate bundles more than a dozen pre-configured libraries and tools across framework, data fetching, forms, testing, and code quality. The template's key features are:

• Next.js framework — Uses Next.js for hybrid static and server rendering, with support for pages under the src/pages directory and TypeScript throughout.
• Chakra-UI design system — Includes a pre-configured Chakra-UI theme in src/styles/theme.ts, along with React Icons and Framer Motion for animations and iconography.
• Data fetching options — Bundles React Query and Axios, and includes an optional SWR hook (useFetch.ts) that can be swapped in for React Query by editing src/pages/_app.tsx and the users page.
• State management — Provides Zustand stores in the src/stores folder, plus the react-use hook collection.
• Form validation — Includes React Hook Form and Yup for schema-based form handling.
• Testing setup — Configures Jest and Testing Library with jest.config.js and jest.setup.js files ready to run.
• Code quality tools — Pre-configures ESLint, Prettier, Husky git hooks, lint-staged, and commitlint, with standard-version for changelog generation.
• PWA and SEO plugins — Adds next-pwa for progressive web app support, next-seo for metadata management, and next-sitemap for sitemap generation.

Who is it for?

Next-Plate is aimed at developers and teams who want a pre-built foundation for a Next.js TypeScript application. It suits front-end developers who need a project scaffold with testing, linting, and commit conventions already in place. It also helps teams that want to standardize their React stack by adopting the same libraries — Chakra-UI, React Query or SWR, Zustand, and React Hook Form — across projects.

What can you do with Next-Plate?

Because the template includes example user pages and API service files, you can adapt them for common scenarios:

• Indie hackers: spin up a new SaaS landing page or prototype with SEO and PWA features already configured.
• Agencies: clone the template as a starting point for client projects, keeping the pre-set ESLint and Prettier rules for consistent code style.
• Developers learning Next.js: study a working example that combines data fetching, forms, state management, and tests in one codebase.
• Open-source maintainers: use the commitlint and standard-version setup to enforce conventional commits and generate changelogs.

How does Next-Plate work?

To use the template, click the "Use this template" button on GitHub to create a new repository, then clone it locally. Install dependencies with pnpm, npm, or yarn, and run dev for development or build and start for production. The template also provides one-click deployment buttons for Vercel, Netlify, and StackBlitz.

FAQ

Is Next-Plate free to use?

Yes, Next-Plate is open source and released under the MIT License. You can use it for personal or commercial purposes, and the author asks for credit and a link back to the GitHub profile if you reuse the template.

Can I use SWR instead of React Query?

The template includes both React Query and an optional SWR implementation. To switch, install SWR, remove React Query providers and imports from src/pages/_app.tsx and src/pages/[login].tsx, and use the useFetch function.

Does Next-Plate support progressive web apps?

Yes, next-pwa is included as a dependency and the project includes a site.webmanifest file in the public folder. The PWA features are part of the template's default configuration.

What testing tools are included?

Next-Plate comes with Jest and Testing Library pre-configured. The package.json scripts include test and test:watch so you can run the test suite after cloning the repository.

Can I extend the template with my own components?

Yes, the template provides folders such as src/components, src/hooks, src/stores, and src/services for adding custom code. Many folders are marked optional in the file tree and can be deleted if you do not need them.