Next.js / React / TypeScript frontend template kept independent from the backend
Next.jsReactStarter
next-frontend-template — Next.js Starter Template
By kawaiiRE
A frontend template built on Next.js, React, and TypeScript that stays independent from the backend and connects to the PocketBase backend template through a versioned health check endpoint.
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-14View source
What stands out
A quick read of the recorded project description.
Built-in health check example expected to connect to PocketBase's /api/v1/health route
Provides an integration:check command to verify that frontend and backend API versions and service identifiers match
Includes centralized routing and styling, typed services, presenters, focused components, and tests
No global state library is preinstalled; the README states that MobX and mobx-react-lite can be introduced when needed
Provides architecture, security, testing, and deployment documentation to read before changing boundaries
Template Details
This is a Next.js / React / TypeScript frontend template. The README states that it is deliberately kept independent from the backend and does not carry over conventions from Vue, Nuxt, Pinia, Vuestic, or Fastify. The template retains centralized routing and styling, typed services, presenters, focused components, and an organization suited to testing and deployment.
The workflow is: copy the entire folder into a new outer folder, rename the package and update src/config/site.ts, src/content/copy.ts, and .env.example, then run corepack yarn install --immutable, copy .env.example to .env.local, and run corepack yarn dev. The template ships with a health check example, and the README recommends replacing it domain by domain.
The frontend expects to reach the versioned PocketBase health check route /api/v1/health at POCKETBASE_URL. The companion pocketbase-backend-template implements that route, but there is no filesystem dependency between this repository and the backend. Start the backend template first, then start the frontend with POCKETBASE_URL pointing to it, and then run corepack yarn integration:check. That command calls PocketBase directly and calls the Next.js /api/health bridge to verify that both expose the same API version and service identifier.
The template does not install a global state library, and the README states that the starter template does not need one; if a feature genuinely requires shared mutable browser state, MobX and mobx-react-lite can be added, with stores organized by domain and created in a client provider. The README provides no further notes on performance, production readiness, or specific framework minor versions.
Next.jsReactStarter
Is it right for your project?
Use Cases
- Starting as an independent frontend project alongside the PocketBase backend template
- Replacing the built-in health check example domain by domain to build actual business interfaces
- Running integration:check to verify that frontend and backend service versions and identifiers match
- Introducing MobX stores according to the README when shared mutable browser state is needed
Suitable For
- Teams that want separate frontend and backend repositories deployed independently
- Projects using Next.js, React, and TypeScript that need centralized routing and styling conventions
- Projects planning to use PocketBase as the backend and needing versioned health check integration
- Developers who need a starter template with typed services, presenters, and a testing structure
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Copy the entire folder into a new outer folder; do not place application files next to the outer folder or import from sibling projects
- 2
Rename the package and update src/config/site.ts, src/content/copy.ts, and .env.example
- 3
Run corepack yarn install --immutable, copy .env.example to .env.local, and then run corepack yarn dev
- 4
Start pocketbase-backend-template first, then start the frontend with POCKETBASE_URL pointing to it, and then run corepack yarn integration:check
- 5
Read docs/architecture.md, docs/security.md, docs/testing.md, and docs/deployment.md before changing boundaries or deployment behavior
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of that 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.
- The frontend expects to reach the versioned PocketBase health check route /api/v1/health at POCKETBASE_URL, and a backend service compatible with that route must be provided or deployed.
- Before running integration:check, pocketbase-backend-template must be started and POCKETBASE_URL must point to it; otherwise the integration verification cannot be completed.
- When using it, copy the entire folder into a new outer folder; do not place application files next to the outer folder or import from sibling projects.
- The package must be renamed and src/config/site.ts, src/content/copy.ts, and .env.example must be updated before use in your own project.
- Installation and development rely on corepack yarn commands, and .env.example must be copied to .env.local before running.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
The frontend expects the versioned PocketBase health route at `/api/v1/health` on `POCKETBASE_URL`. The separate `pocketbase-backend-template` implements it, but this repository has no filesystem dependency on that backend.
Original README
Start `pocketbase-backend-template` first, then start this frontend with `POCKETBASE_URL` pointing to it. Once both are running, execute `corepack yarn integration:check` here. The check calls PocketBase directly and then calls the Next.js `/api/health` bridge, validating that both services expose the same API version and service identity. See `docs/integration.md` for the complete workflow.
Original README
1. Copy this entire folder to a new wrapper folder. Do not place application files beside the wrapper or import from sibling projects.
Original README
2. Rename the package and update `src/config/site.ts`, `src/content/copy.ts`, and `.env.example`.
Original README
https://github.com/kawaiiRE/next-frontend-template/blob/main/LICENSEhttps://github.com/kawaiiRE/next-frontend-template/blob/main/README.md3. Run `corepack yarn install --immutable`, copy `.env.example` to `.env.local`, then run `corepack yarn dev`.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-14. 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 · 85 / 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-11
- Screenshot last checked
- 2026-10-14
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: codex-user-requested-batch-review-20261015 · 2026-10-15
Inspect the recorded source material
SHA-256: df34096075953efab6daf8ec4f004a653a7ae1ec46e6c7d2b2fcd0cf7228c993
2026-10-14T23:50:48.043Z
Source file / repository# Next.js frontend template [](https://github.com/kawaiiRE/next-frontend-template/actions/workflows/ci.yml) [Live demo](https://next-template.rachida.dev) | [PocketBase backend template](https://github.com/kawaiiRE/pocketbase-backend-template) A production-minded Next.js 16 / React 19 / TypeScript frontend that is deliberately independent from its backend. It keeps the useful discipline of the Nuxt starter—central routes and styling, typed services, presenters, focused components, tests, and safe deployment—without carrying Vue, Nuxt, Pinia, Vuestic, or Fastify conventions into React. ## Start a project 1. Copy this entire folder to a new wrapper folder. Do not place application files beside the wrapper or import from sibling projects. 2. Rename the package and update `src/config/site.ts`, `src/content/copy.ts`, and `.env.example`. 3. Run `corepack yarn install --immutable`, copy `.env.example` to `.env.local`, then run `corepack yarn dev`. 4. Replace the health example one domain slice at a time. Keep route, contract, repository, service, presenter, component, and test changes synchronized. The frontend expects the versioned PocketBase health route at `/api/v1/health` on `POCKETBASE_URL`. The separate `pocketbase-backend-template` implements it, but this repository has no filesystem dependency on that backend. ## Run with the PocketBase template Start `pocketbase-backend-template` first, then start this frontend with `POCKETBASE_URL` pointing to it. Once both are running, execute `corepack yarn integration:check` here. The check calls PocketBase directly and then calls the Next.js `/api/health` bridge, validating that both services expose the same API version and service identity. See `docs/integration.md` for the complete workflow. ## Commands - `corepack yarn integration:check` — verify the live Next.js-to-PocketBase connection - `corepack yarn dev` — local development - `corepack yarn format:write` — format files - `corepack yarn check` — formatting, lint, types, tests, and production build - `corepack yarn start` — serve the production build No global store is installed because the starter does not need one. If a real feature requires shared mutable browser state, add MobX and `mobx-react-lite`, keep stores domain-based, and create each store inside a client provider. Read `docs/architecture.md`, `docs/security.md`, `docs/testing.md`, and `docs/deployment.md` before changing boundaries or deployment behavior. ## Contributing and security Contributions are welcome; see `CONTRIBUTING.md`. Report security issues privately by following `SECURITY.md` rather than opening a public issue.
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