Integrates TypeScript strict mode, Tailwind CSS, and shadcn/ui components
Next.jsReactStarter
next-template — Next.js Starter Template
By hHolyMolly
A Next.js starter template that integrates TypeScript, Tailwind CSS, i18n, state management, form validation, and security middleware, with removable example code.
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-06View source
What stands out
A quick read of the recorded project description.
Uses next-intl for [locale] routing, message key consistency checks, and hreflang
Provides example code for Redux Toolkit and TanStack Query, including streaming SSR prefetching
Built-in security middleware such as CSP nonce, rate limiting, and CSRF checks
Runs ESLint, Stylelint, Prettier, Vitest, and other quality gates together via pnpm check
Includes a clean:demo command to remove homepage demo code and example routes
Template Details
This template is a Next.js starter; the repository is hHolyMolly/next-template and it is MIT licensed. The README states that it integrates TypeScript strict mode, Tailwind CSS, next-intl internationalization, Redux Toolkit and TanStack Query for state management, React Hook Form and Zod for form validation, and security middleware such as CSP nonce, rate limiting, and CSRF checks. The project provides runnable example pages and API routes, and removes demo code via the clean:demo command. The quality toolchain includes ESLint, Stylelint, Prettier, Vitest, knip, and commitlint, run together via pnpm check. Environment requirements are Node.js 24+ and pnpm 10.16+, and deployment supports Vercel or self-hosting.
Next.jsReactStarter
Is it right for your project?
Use Cases
- Quickly setting up a new Next.js project with internationalization and type safety
- Referencing how form validation, state management, and security middleware are integrated
- Unifying the code quality toolchain and commit conventions within a team
- Deploying to Vercel or a self-hosted environment and reusing existing CI checks
Suitable For
- Frontend developers using Next.js and TypeScript
- Applications that need internationalization and multilingual routing
- Teams that value code quality gates and security configuration
- Projects that want to start from runnable examples and clean up demo code themselves
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 24+ and pnpm 10.16+
- 2
Use npx degit hHolyMolly/next-template my-app to get the template, then pnpm install
- 3
Run pnpm dev to start the development server; next-env.d.ts is generated by pnpm dev or pnpm typecheck
- 4
Use pnpm clean:demo my-app to remove homepage demo code and example routes
- 5
The environment variable NEXT_PUBLIC_CLIENT_URL is required; local overrides can be written to .env.local
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- 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
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
- Runtime requirements: Node.js 24 or later and pnpm 10.16 or later.
- The environment variable NEXT_PUBLIC_CLIENT_URL must be configured, otherwise the project cannot run properly.
- For self-hosted deployment, it must be placed behind a reverse proxy and the TRUSTED_PROXY_HOPS environment variable must be set.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Node.js 24+, pnpm 10.16+.
Original README
Required: `NEXT_PUBLIC_CLIENT_URL`.
Original README
https://github.com/hHolyMolly/next-template/blob/main/LICENSEhttps://github.com/hHolyMolly/next-template/blob/main/README.mdSelf-hosted — `pnpm build && pnpm start` behind a reverse proxy (set `TRUSTED_PROXY_HOPS`).
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-06. 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 · 88 / 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-10-06
- Screenshot last checked
- 2026-10-06
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.
Review declaration: [email protected] · 2026-10-06
Inspect the recorded source material
SHA-256: 2d089b76d0728f77d8d485e79bf756496142feed2ac7144a40352a1ad0345da7
2026-10-06T07:08:24.911Z
Source file / repository<div align="center">
<h1>Next Template</h1>
<p>Production-ready Next.js starter with TypeScript, Tailwind CSS v4, i18n and working examples for every shipped library</p>
<p>
<a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D24-brightgreen?style=flat-square" alt="Node.js"></a>
<a href="https://nextjs.org"><img src="https://img.shields.io/badge/next.js-16-black?style=flat-square" alt="Next.js"></a>
<a href="https://www.typescriptlang.org"><img src="https://img.shields.io/badge/typescript-strict-3178C6?style=flat-square" alt="TypeScript"></a>
<a href="https://github.com/hHolyMolly/next-template/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="License"></a>
</p>
</div>
<br />
## Features
- **Next.js 16** — App Router, Turbopack, React 19, React Compiler
- **TypeScript** — strict mode (`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`)
- **Tailwind CSS v4** — CSS-first config, oklch design tokens, shadcn/ui components
- **i18n** — next-intl, `[locale]` routing, key-parity check, typed messages, title template + hreflang
- **State** — Redux Toolkit (live `uiSlice` example) + TanStack Query (streaming SSR: pending-query dehydration + `useSuspenseQuery`)
- **Forms** — React Hook Form + shared Zod schema, re-validated in a Server Action
- **Security** — per-request CSP nonce (`strict-dynamic`), hardened headers, one rate-limit identity rule for pages/API/actions, CSRF check for actions, header-only ISR webhook secret
- **Quality gates** — ESLint (0 warnings), Stylelint, Prettier, typecheck (app + tests), Vitest 5, i18n parity, knip, commitlint — `pnpm check` runs them all; CI and Vercel run the same set
- **Supply chain** — pnpm `minimumReleaseAge` + install-script allow-list, SHA-pinned Actions, Dependabot cooldown
## Quick Start
```bash
npx degit hHolyMolly/next-template my-app
cd my-app
pnpm install
git init && pnpm prepare # enable git hooks
pnpm dev
```
Remove the demo surface when you start building:
```bash
pnpm clean:demo my-app # degit clones: also renames + finalizes
pnpm clean:demo my-app --force # git clones: force the finalization step
```
> Node.js 24+, pnpm 10.16+. `next-env.d.ts` is generated by `pnpm dev` / `pnpm typecheck`.
## Living Examples (removed by `clean:demo`)
Every shipped library is exercised by real code on the home page:
| Example | Shows |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| `[locale]/components/ContactForm` | RHF + zodResolver → Server Action (`withServerAction` + CSRF + rate limit) → toast |
| `[locale]/components/HealthStatus` | TanStack Query streaming SSR: in-process prefetch + `HydrationBoundary` → `useSuspenseQuery` + `ErrorBoundary`; axios refetches |
| `[locale]/components/DemoBanner` | Redux `uiSlice` + `featureFlags` + `useLocalStorage` |
| `GET /api/health` · `POST /api/echo` | `withApiHandler`: Zod validation, typed errors, rate-limit headers |
## Commands
| Command | Description |
| -------------------------------------------- | -------------------------------------------------- |
| `pnpm dev` / `build` / `start` / `preview` | Develop · build · serve |
| `pnpm lint` / `lint:fix` | ESLint, 0 warnings allowed |
| `pnpm lint:css` / `lint:css:fix` | Stylelint check · autofix |
| `pnpm format` / `format:check` | Prettier write · check |
| `pnpm typecheck` / `typecheck:test` | TypeScript: app · tests |
| `pnpm test` / `test:watch` / `test:coverage` | Vitest (+ coverage thresholds) |
| `pnpm check` | All gates in one command (same set as CI) |
| `pnpm check:i18n` | Locale key parity |
| `pnpm knip` | Unused files / deps (blocking), exports (advisory) |
| `pnpm analyze` | Turbopack bundle analyzer |
| `pnpm clean` / `clean:cache` / `clean:demo` | Cleanup |
Git hooks: pre-commit (lint-staged + i18n parity) · commit-msg (commitlint) · pre-push (typecheck + tests).
## Project Structure
```
src/
├── app/
│ ├── layout.tsx # <html>/<body>, JSON-LD (nonce), styles, font variable
│ ├── api/ # health · echo (demo) · revalidate (ISR webhook) — withApiHandler
│ └── [locale]/
│ ├── layout.tsx # locale + NextIntlClientProvider (client namespaces)
│ ├── page.tsx # demo home (SSR query prefetch)
│ ├── components/ # demo surface (clean:demo removes it)
│ └── (routes)/ # Header/Footer layout, template page, 404 catch-all
├── components/ UI/ (shadcn) · layouts/ (Header, Footer, LanguageSwitch, WebVitals, …) · icons/
├── configs/ project · metadata · routes · env · featureFlags
├── hooks/ 13 SSR-safe hooks
├── lib/ withApiHandler · withServerAction · rateLimit · errors · errorReporting · cn · queryClient
├── messages/ {en,ru}/{translations,metadata,demo}.json
├── services/ api (http policy · axios · serverFetch · queryOptions · cache) · i18n (next-intl)
├── store/ Redux Toolkit (slices/uiSlice)
├── styles/ tailwind.css (@theme) · vars.css (oklch tokens) · normalize.css (@layer base) · fonts.ts
└── proxy.ts middleware: rate limit → CSP nonce → next-intl
```
## Environment
`.env.development` / `.env.production` are committed (no secrets). Local overrides go to
`.env.local` (gitignored, wins). Required: `NEXT_PUBLIC_CLIENT_URL`. Full list: [.env.example](.env.example).
## Deploy
**Vercel** — import the repo; `vercel.json` runs `pnpm check && pnpm build` on every push (same gates as CI).
Self-hosted — `pnpm build && pnpm start` behind a reverse proxy (set `TRUSTED_PROXY_HOPS`).
## Docs
Architecture rules, conventions and security contracts live in [AGENTS.md](AGENTS.md) —
the single source of truth for humans and AI agents alike. Debugging notes: [docs/gotchas.md](docs/gotchas.md).
Release checks: [docs/verification-playbook.md](docs/verification-playbook.md). Security policy: [SECURITY.md](SECURITY.md).
## License
MIT © [HolyMolly](https://github.com/hHolyMolly)
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