Next-SMRT is a Next.js boilerplate template that kickstarts production web apps by bundling TypeScript, Styled Components, Material-UI, and Zustand with Docker support.
What is Next-SMRT?
Next-SMRT is a GitHub template repository created by csprance that combines a set of front-end tools into one Next.js starter. It takes a clean project skeleton and produces a production web application with configured state management, theming, testing, and Docker deployment. The repository includes an example TODO list app to demonstrate how the pieces fit together, and its public repo has 56 stars.
Key Features
- Next.js with TypeScript — Uses the Next.js React framework and TypeScript for type-safe development, enabling server-side rendering and static site generation.
- Zustand state management — Adopts Zustand as a Redux replacement, keeping global state code minimal and avoiding the boilerplate of Redux.
- Immer integration — Immer is included to handle immutable state updates in a simpler way.
- Styled Components and Material-UI — Styled-components handle custom styling while Material-UI supplies the component library, with Roboto font and material-icons loaded from a CDN.
- Jest testing — Preconfigured with Jest; run
yarn test,yarn test:watch, oryarn test:coveragefor watch and coverage modes. - SEO constants — Centralizes
SITE_NAME,SITE_TITLE,SITE_DESCRIPTION, andSITE_IMAGEinsrc/constants/env.ts, feeding og and Twitter meta tags. - Docker and Traefik support — Includes a
Dockerfileand multiple docker-compose files; with Traefik running,docker-compose up -d --buildserves the app athttp://next-smrt.localhost. - Prettier formatting — The code follows Prettier as shown by the repository's code style badge.
Who is it for?
- Next.js developers who want a preconfigured stack and want to skip wiring state management, styling, testing, and deployment config themselves.
- Teams deploying with Docker who already run Traefik and want a project that treats container deployment as a default.
- Developers who prefer Zustand over Redux and want to see a working example of Zustand combined with Immer and Next.js.
What can you do with Next-SMRT?
- Start a new app immediately: Clone the repo or click "Use This Template" on GitHub, set the SEO variables, and run
yarn devto begin development. - Run an automated test suite: Use
yarn testfor one run,yarn test:watchfor continuous mode, andyarn test:coverageto generate coverage reports. - Deploy the app in containers: Run
docker-compose up -d --buildto build and launch the app behind Traefik atnext-smrt.localhost.
How does Next-SMRT work?
Install dependencies with yarn, then run yarn dev to start the development server. For production, execute yarn build and yarn start. To deploy via Docker, ensure Traefik is running, then use docker-compose up -d --build. The project is published under the UNLICENSE.
Pricing
Free. The project is released under the UNLICENSE, placing it in the public domain for unrestricted use.
FAQ
How do I install Next-SMRT?
Clone the repository with git clone https://github.com/csprance/next-smrt.git or use the "Use This Template" button on GitHub, then run yarn to install dependencies.
How do I set SEO variables?
Open src/constants/env.ts and update the exported site name, title, description, and image constants. These populate the og and Twitter meta tags.
Does Next-SMRT use Redux?
No. The README describes Zustand as a 'Redux replacement,' and Immer is used for immutable state updates.
How do I run tests?
Run yarn test to execute the Jest suite once. Use yarn test:watch during development and yarn test:coverage to produce a coverage report.
How do I deploy with Docker?
Make sure Traefik is running, then run docker-compose up -d --build. The app will be available at http://next-smrt.localhost based on the included Traefik labels.
