← Back to all products
$49
Next.js Starter Kit
Next.js 14+ App Router template with SSR, ISR, API routes, Prisma ORM, and Vercel deployment configs.
JSONMarkdownConfigTypeScriptNext.jsPostgreSQL
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 35 files
nextjs-starter-kit/
├── LICENSE
├── README.md
├── app/
│ ├── api/
│ │ ├── auth/
│ │ │ └── route.ts
│ │ ├── posts/
│ │ │ └── route.ts
│ │ └── users/
│ │ └── route.ts
│ ├── blog/
│ │ ├── [slug]/
│ │ │ └── page.tsx
│ │ └── page.tsx
│ ├── dashboard/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── error.tsx
│ ├── layout.tsx
│ ├── loading.tsx
│ ├── not-found.tsx
│ └── page.tsx
├── components/
│ ├── Footer.tsx
│ ├── Header.tsx
│ └── PostCard.tsx
├── free-sample.zip
├── guide/
│ ├── architecture.md
│ └── deployment.md
├── guides/
│ ├── architecture.md
│ └── deployment.md
├── index.html
├── middleware.ts
├── next.config.ts
├── package.json
├── prisma/
│ └── schema.prisma
├── src/
│ ├── lib/
│ │ ├── auth.ts
│ │ ├── prisma.ts
│ │ └── utils.ts
│ └── types/
│ └── index.ts
├── tsconfig.json
└── vercel.json
📖 Documentation Preview README excerpt
Next.js Starter Kit
A Next.js 14+ App Router template with server components, route handlers, Prisma ORM, middleware-based auth, ISR/SSR examples, and Vercel deployment configs. Built with TypeScript throughout. Drop this into your project and start building features immediately instead of configuring framework plumbing.
What's Included
| Area | Files | Description |
|---|---|---|
| App Router | layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx | Root layout with metadata, a landing page, and graceful error/loading states |
| Dashboard | dashboard/layout.tsx, dashboard/page.tsx | Authenticated layout with server-side session check |
| Blog (ISR) | blog/page.tsx, blog/[slug]/page.tsx | Incremental Static Regeneration example — pages rebuild every 60 seconds without redeploying |
| API Routes | api/auth/route.ts, api/users/route.ts, api/posts/route.ts | Route handlers demonstrating CRUD, validation, error responses, and pagination |
| Prisma ORM | schema.prisma, prisma.ts | Database schema with User, Post, and Session models, plus a singleton PrismaClient |
| Middleware | middleware.ts | Edge middleware for route protection and auth token validation |
| Components | Header.tsx, Footer.tsx, PostCard.tsx | Shared layout components |
| Config | next.config.ts, vercel.json, tsconfig.json, .env.example | Framework, deployment, and TypeScript configuration |
| Guides | architecture.md, deployment.md | How everything fits together and how to deploy |
Quick Start
# 1. Install dependencies
npm install
# 2. Copy environment variables
cp .env.example .env
# 3. Set up the database (adjust DATABASE_URL in .env first)
npx prisma db push
# 4. Seed sample data (optional)
npx prisma db seed
# 5. Start the dev server
npm run dev
# 6. Open http://localhost:3000
File Structure
nextjs-starter-kit/
├── app/
│ ├── layout.tsx # Root layout (html, body, metadata)
│ ├── page.tsx # Landing page (server component)
│ ├── loading.tsx # Root loading UI
│ ├── error.tsx # Root error boundary
│ ├── not-found.tsx # Custom 404 page
│ ├── dashboard/
│ │ ├── layout.tsx # Auth-gated layout
│ │ └── page.tsx # Dashboard page
│ ├── blog/
│ │ ├── page.tsx # Blog listing (ISR, revalidate: 60)
│ │ └── [slug]/
│ │ └── page.tsx # Blog post detail (ISR + generateStaticParams)
│ └── api/
│ ├── auth/
│ │ └── route.ts # Login, signup, session endpoints
│ ├── users/
*... continues with setup instructions, usage examples, and more.*
📄 Code Sample .ts preview
middleware.ts
// ─────────────────────────────────────────────────────────────
// Edge Middleware — runs before every request at the edge.
//
// Responsibilities:
// 1. Protect /dashboard/* routes — redirect to /login if no valid token
// 2. Redirect logged-in users away from /login and /signup
// 3. Add security headers to all responses
//
// This runs in the Edge Runtime (V8 isolates, not Node.js), so
// you can't use Node-specific APIs like fs or crypto here.
// The `jose` library works in both runtimes, which is why we
// use it instead of `jsonwebtoken`.
// ─────────────────────────────────────────────────────────────
import { NextResponse, type NextRequest } from "next/server";
import { jwtVerify } from "jose";
const SECRET = new TextEncoder().encode(
process.env.NEXTAUTH_SECRET || "fallback-dev-secret-change-me"
);
const AUTH_COOKIE = "auth-token";
// Routes that require authentication.
const PROTECTED_PATHS = ["/dashboard"];
// Routes that authenticated users should be redirected away from.
const AUTH_PAGES = ["/login", "/signup"];
export async function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
const token = request.cookies.get(AUTH_COOKIE)?.value;
// Verify the token (returns null if invalid or expired).
let isAuthenticated = false;
if (token) {
try {
await jwtVerify(token, SECRET);
isAuthenticated = true;
} catch {
// Token is invalid or expired — treat as unauthenticated.
}
}
// Protect dashboard routes.
const isProtected = PROTECTED_PATHS.some((p) => pathname.startsWith(p));
if (isProtected && !isAuthenticated) {
const loginUrl = new URL("/login", request.url);
// Remember where they were trying to go so we can redirect back after login.
loginUrl.searchParams.set("callbackUrl", pathname);
# ... 17 more lines ...