Markkos89 / next-kickstart

Next.js 13.4 app router boilerplate. Edge ready. Enable what you need. ESLint, Prettier, Tailwind, tRPC + WebSockets, Drizzle, NextAuth, Vitest, Testing Library, Playwright, PWA, Docker, CI/CD

next-kickstart

Feature packed Next.js 13.4 (app router) boilerplate. Zero setup. Edge ready.

Some features depend on environment variables (indicated in features list with 💡) and so require enabling. They are disabled by default so that the app runs without any setup. They can be enabled by uncommenting all lines under where @enable {feature} appears. Some of these may be optional, indicated with @optional {purpose} e.g.

/**
 * @enable Drizzle
 * @optional Store auth data in database
 */
// adapter: DrizzleAdapter(db)

📚 Features

Core

• 🏗️ TypeScript - Configured to maximize type safety
• ⚙️ T3 Env - Environment variable validation
• 🌐 tRPC - Create end-to-end type-safe APIs that work in both client and server components
• ⚡💡 WebSockets - Real-time communication (using Pusher, but can be swapped out for alternatives)
  • ❗️ using pusher-http-edge to run on edge, use the nodejs runtime with a stable version if desired
  • 🔗 integrates with tRPC for end-to-end type-safe events
• 💽💡 Drizzle - ORM with maximal type safety
• 🔒💡 NextAuth - Flexible and secure authentication
  • ❗️ using next-auth@experimental to run on edge. use the nodejs runtime with a stable version if desired
  • 🔗💡 integrates with Drizzle to store auth data

Development

• 📏 ESLint - Consistent code standards
• ✨ Prettier - Consistent code styling
• 🎨 Tailwind CSS - Utility-first CSS framework
• 🧩 shadcn/ui - Components built with Radix UI and Tailwind CSS
• 📝 MDX - Use markdown with components
• 📁 Absolute imports - Easier and cleaner module imports
• 💻 VS Code configurations - Configurations for easy debugging

Testing

• 🧪 Vitest - Flexible testing framework
• 🐙 React Testing Library - Maintainable component testing
  • 🔗 integrates with Vitest as your testing framework
• 🎭 Playwright - End-to-end testing against multiple environments

Deployment

• 📊 Bundle analyzer - Analyze bundle sizes in each environment with pnpm run build:analyze
• 📦💡 next-pwa - Make your website as a progressive web app (PWA)
• 🐳 Docker - (local and production) Docker-compose and Dockerfiles for running anywhere
• 🔄 GitHub Actions - Robust CI/CD

🌱 Getting started

🚀 Option 1: Clone and deploy with Vercel

📋 Option 2: Clone and run locally

1. Fork or use the template
2. Clone your new repository
3. Install dependencies and run the development server

• with pnpm

  pnpm install
  pnpm run dev

• or with Docker

  docker-compose --file docker/dev/docker-compose.yml up

⚙️ Configuration

Docker

• .dockerignore
• docker/ - Dockerfile and docker-compose.yml for development and production

Drizzle

💡 (requires enabling)

• src/db/
• src/lib/db.ts
• drizzle.config.ts

ESLint

• .eslintrc.json

GitHub Actions

• .github/workflows/ci.yml - type-checking and linting (hence these errors are ignored in next.config.mjs)

MDX

• mdx-components.tsx

next-pwa

• public/icon-512x512.png
• public/manifest.json
• next.config.mjs

NextAuth

💡 (requires enabling)

• src/app/api/auth/[...nextauth]/route.ts
• src/components/auth.tsx
• src/db/schemas/auth.ts — store auth data (users, accounts, sessions, verification tokens) in database
• src/lib/auth.ts

Playwright

• e2e/
• playwright.config.ts

Prettier

• .eslintrc.json
• .prettierignore
• .prettierrc.json

React Testing Library

• src/app/page.test.tsx
• testing/setup.ts

shadcn/ui

• src/components/providers/theme-provider.tsx
• src/components/ui/
• src/components/theme-toggle.tsx
• components.json

T3 Env

• src/env.mjs - configure environment variables
• next.config.mjs - environment variables are validated at build-time

Tailwind CSS

• src/styles/globals.css
• tailwind.config.js

tRPC

• src/app/api/trpc/[trpc]/route.ts
• src/components/providers/trpc-provider.tsx
• src/trpc/

Examples

• src/app/examples/client-component/page.tsx - use in a client component
• src/app/examples/server-component/page.tsx - use in a server component

TypeScript

• tsconfig.json - all modifications from create-next-app are explained with comments
• types/reset.d.ts - using ts-reset to increase type-safety

Vitest

• testing/setup.ts
• types/vitest.d.ts
• vitest.config.ts

VS Code

• .vscode/extensions.json - recommended workspace extensions
• .vscode/launch.json - debug configurations
• .vscode/settings.json - use project TypeScript version

WebSockets with Pusher

💡 (requires enabling)

• src/hooks/useEvent.ts
• src/lib/events.ts
• src/trpc/methods.ts

Examples

• src/app/examples/websockets/page.tsx