Next.jsReactSaaSStarter

nextjs-starterkit — Next.js SaaS Template

By fjrfthrrhmn

A SaaS starter template based on Next.js App Router, using TypeScript strict mode, Tailwind CSS, and a Feature-Sliced Design directory structure, with built-in testing, internationalization, and code quality toolchain.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

Visit websiteOpens in a new tab

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-03View source

What stands out

A quick read of the recorded project description.

Uses Next.js App Router with TypeScript strict mode and Tailwind CSS

Organizes the src directory by Feature-Sliced Design, separating layers such as app, components, features, hooks, and lib

Integrates Shadcn UI/Radix, TanStack React Query, Zustand, Zod, next-intl, and Motion

Includes Vitest + Testing Library unit/integration tests and Playwright end-to-end tests

Configures ESLint, Prettier, type checking, and Husky Git hooks as pre-commit quality gates

The .docs/ directory provides engineering documentation by topics such as architecture, technical, engineering, ADR, API, testing, deployment, and security

Template Details

This template is a Next.js starter project that uses App Router to organize routes and layouts, and divides the src directory according to Feature-Sliced Design (FSD), including modules such as app, components, features, hooks, lib, i18n, testing, types, and utils. The technology stack covers TypeScript strict mode, Tailwind CSS, Shadcn UI/Radix component primitives, TanStack React Query for server state, Zustand for client state, Zod for runtime validation, next-intl for internationalization, and Motion for animations.

On the engineering side, it provides Vitest and Testing Library for unit/integration testing, Playwright for end-to-end testing, and configures ESLint, Prettier, TypeScript type checking, and Husky Git hooks (pre-commit runs lint-staged, pre-push runs type checking and tests). The .docs/ directory in the repository organizes engineering documentation into subdirectories such as architecture, technical, engineering, adr, api, testing, deployment, security, ai, product, design, glossary, and onboarding.

Prerequisites are Bun 1.2 or higher, or Node.js 20 or higher. You need to copy .env.example to .env and fill it in as needed. The template is released under the MIT license, allowing free use, modification, commercial use, and distribution, provided the copyright and license notice are retained. Third-party assets such as demo images, fonts, and icons, as well as external services such as domains, hosting, databases, payments, or AI, are not covered by the code license and must be checked separately or paid for. The README does not list specific dependency versions; actual versions are based on the repository's dependency manifest.

Next.jsReactSaaSStarter

Is it right for your project?

Use Cases

New Next.js projects that need to start with App Router and an FSD directory structure
Frontend engineering that wants testing, linting, and Git hooks integrated in advance
Web applications that need internationalization (next-intl) and client/server state management solutions
Teams planning to organize engineering collaboration processes according to the architecture, API, testing, deployment, and other documents in .docs/

Suitable For

Developers familiar with React and TypeScript who want to quickly set up a project skeleton
Teams that prefer organizing code by Feature-Sliced Design layers
Projects that need unit tests, E2E tests, and a code quality toolchain available out of the box
SaaS-like applications that need basic internationalization and state management configuration

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Requires Bun 1.2 or higher, or Node.js 20 or higher, and Git installed
2
After cloning the repository, run bun install to install dependencies
3
Copy .env.example to .env and fill in environment variables as needed
4
Run bun dev to start the development server, accessible by default at http://localhost:3000
5
Before committing, run bun check-types, bun lint, bun format, bun test:run, and bun build in order

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

You may freely use, modify, commercially use, and distribute the code of this version.
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 runtime requires Bun 1.2 or higher, or Node.js 20 or higher; lower versions cannot install and start normally as documented.
You need to copy .env.example to .env and fill in environment variables as needed; some features may not work without configuration.
When committing code, Husky automatically runs lint-staged on pre-commit and type checking and tests on pre-push, which may block commits that do not meet the quality gates.
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 additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

Bun](https://bun.sh) >= 1.2 (atau Node.js >= 20)
Original README

cp .env.example .env # Edit .env sesuai kebutuhan
Original README

Git hooks (Husky) akan menjalankan lint-staged otomatis di pre-commit
Original README

https://github.com/fjrfthrrhmn/nextjs-starterkit/blob/main/LICENSE https://github.com/fjrfthrrhmn/nextjs-starterkit/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-03. 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: SaaS · 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-05-17
Screenshot last checked: 2026-10-03

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: 6324bb2a2a8a1433c06220db2992ba200faf89adc3ee0e9b7d6e8520d17ec08b

2026-10-03T02:56:38.687Z

Source file / repository

# Next App

Foundation project Next.js 16 dengan arsitektur Feature-Sliced Design (FSD),
TypeScript strict, Tailwind CSS v4, dan tooling modern.

## Tech Stack

| Teknologi                    | Fungsi                        |
| ---------------------------- | ----------------------------- |
| **Next.js 16** (App Router)  | Routing, SSR, RSC, API Routes |
| **TypeScript** (Strict)      | Type safety                   |
| **Tailwind CSS v4**          | Styling utility-first         |
| **Shadcn UI / Radix**        | Component primitives          |
| **TanStack React Query**     | Server state management       |
| **Zustand**                  | Client state management       |
| **Zod**                      | Runtime validation            |
| **next-intl**                | Internasionalisasi            |
| **Motion**                   | Animasi                       |
| **Vitest + Testing Library** | Unit / integration test       |
| **Playwright**               | E2E test                      |

## Struktur Folder

```
src/
├── app/            # Routing & layout (App Router)
├── components/     # Shared components (ui/, layouts/, widgets/, providers/)
├── config/         # App configuration
├── constants/      # Global constants
├── data/           # Static data & mock
├── features/       # Feature modules (FSD)
├── hooks/          # Shared hooks
├── i18n/           # Internationalization
├── lib/            # Third-party integrations
├── styles/         # Global styles
├── testing/        # Test utilities & setup
├── types/          # Global type definitions
└── utils/          # Pure utility functions
```

## Prasyarat

- [Bun](https://bun.sh) >= 1.2 (atau Node.js >= 20)
- Git

## Setup Development

```bash
# 1. Clone repository
git clone https://github.com/fjrfthrrhmn/next-app.git
cd next-app

# 2. Install dependencies
bun install

# 3. Copy environment variables
cp .env.example .env
# Edit .env sesuai kebutuhan

# 4. Jalankan development server
bun dev
```

Buka [http://localhost:3000](http://localhost:3000) di browser.

## Scripts

| Perintah          | Deskripsi                |
| ----------------- | ------------------------ |
| `bun dev`         | Start development server |
| `bun build`       | Production build         |
| `bun start`       | Start production server  |
| `bun lint`        | ESLint check             |
| `bun format`      | Prettier check           |
| `bun format:fix`  | Prettier format          |
| `bun check-types` | TypeScript type checking |
| `bun test`        | Vitest (watch mode)      |
| `bun test:run`    | Vitest (single run)      |

## Quality Gates

Sebelum push, pastikan semua lolos:

```bash
bun check-types  # Type checking
bun lint         # ESLint
bun format       # Prettier
bun test:run     # Unit & integration tests
bun build        # Production build
```

Git hooks (Husky) akan menjalankan lint-staged otomatis di pre-commit
dan typecheck + test di pre-push.

## Dokumentasi

Seluruh dokumentasi engineering tersedia di `.docs/`:

| Sub-folder      | Isi                                  |
| --------------- | ------------------------------------ |
| `architecture/` | System architecture, data flow       |
| `technical/`    | Tech stack, dependencies, setup      |
| `engineering/`  | Coding standards, code review        |
| `adr/`          | Architecture Decision Records        |
| `api/`          | API documentation                    |
| `testing/`      | Testing strategy & coverage goals    |
| `deployment/`   | Deployment pipeline & environments   |
| `security/`     | Auth, authorization, data protection |
| `ai/`           | AI collaboration guide               |
| `product/`      | Product vision & roadmap             |
| `design/`       | Design system & UI/UX guidelines     |
| `glossary/`     | Project terminology                  |
| `onboarding/`   | Developer onboarding guide           |

## Lisensi

Distributed under the MIT License. Lihat `LICENSE` untuk informasi lebih lanjut.

Report a correction

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