Next Kickstart by Syhner - A Nextjs Template

Next Kickstart

Next.js 14 kickstarter. Zero setup & edge ready. Take what you need: ESLint, Prettier, Tailwind, tRPC, WebSockets, Drizzle, Lucia Auth, Vitest, Testing Library, Playwright, PWA, Docker, CI, Bun

Overview

next-kickstart is a minimal yet feature-packed Next.js 13.4 boilerplate that provides a convenient starting point for building Next.js applications. It is designed to require zero configuration and can run on the edge. The boilerplate includes a variety of features such as TypeScript support, environment variable validation, ESLint for code consistency, Prettier for code styling, Tailwind CSS for utility-first CSS framework, components built with Radix UI and Tailwind CSS, ORM with maximal type safety using Drizzle, flexible and secure authentication using NextAuth, progressive web app (PWA) support with next-pwa, flexible testing framework with Vitest, maintainable component testing with React Testing Library, End-to-end testing with Playwright, robust CI/CD capabilities with GitHub Actions, and VS Code configurations for easy debugging.

Features

TypeScript - Configured to maximize type safety
T3 Env - Environment variable validation
ESLint - Consistent code standards
Prettier - Consistent code styling
Tailwind CSS - Utility-first CSS framework
shadcn/ui - Components built with Radix UI and Tailwind CSS
Drizzle - ORM with maximal type safety (requires enabling)
NextAuth - Flexible and secure authentication (requires enabling)
next-pwa - Installable as a progressive web app (PWA)
Vitest - Flexible testing framework
React Testing Library - Maintainable component testing
Playwright - End-to-end testing against multiple environments
GitHub Actions - Robust CI/CD
VS Code configuration - Configurations for easy debugging

Option 1: Clone and deploy with Vercel

Clone the repository and navigate to the project directory.
Deploy the project with Vercel.

Option 2: Clone and run locally

Clone the repository and navigate to the project directory.
Install dependencies by running the following command:
```
npm install
```
Run the development server by running the following command:
```
npm run dev
```

Configuration

TypeScript

tsconfig.json:
- Set the "noUncheckedIndexedAccess" option to true to increase type safety.
- Set the "target" option to "ES6" for compatibility with Drizzle Studio.
Absolute imports with ~/* (to differentiate from @/* namespace imports).
types/reset.d.ts: Use ts-reset to increase type safety.

T3 Env

env.mjs: Configure environment variables.

ESLint

.eslintrc.json: ESLint configuration for consistent code standards.

Prettier

.eslintrc.json, .prettierignore, .prettierrc.json: Prettier configuration for consistent code styling.

Tailwind CSS

src/styles/globals.css, tailwind.config.js: Tailwind CSS configuration.

shadcn/ui

src/components/ui/, src/components/theme-provider.tsx, src/components/theme-toggle.tsx, components.json: Components built with Radix UI and Tailwind CSS.

Drizzle

src/db/, src/lib/db.ts, drizzle.config.ts: ORM with maximal type safety (requires enabling).

NextAuth

src/app/api/auth/[...nextauth]/route.ts, src/components/auth.tsx, src/db/schemas/auth.ts: Flexible and secure authentication (requires enabling).

next-pwa

public/icon-512x512.png, public/manifest.json, next.config.mjs: Installable as a progressive web app (PWA).

Vitest

testing/setup.ts, types/vitest.d.ts, vitest.config.ts: Flexible testing framework.

React Testing Library

src/app/page.test.tsx: Maintainable component testing.

Playwright

e2e/, playwright.config.ts: End-to-end testing against multiple environments.

GitHub Actions

.github/workflows/ci.yml: Robust CI/CD configuration.

VS Code

.vscode/launch.json: Debug configurations.
.vscode/settings.json: Use project TypeScript version.

Summary

next-kickstart is a highly customizable Next.js boilerplate that provides an extensive set of features out of the box. It comes with TypeScript support, environment variable validation, code consistency and styling tools, utility-first CSS framework, pre-built components, ORM with maximal type safety, flexible and secure authentication, progressive web app support, flexible testing framework, maintainable component testing, end-to-end testing, robust CI/CD capabilities, and convenient debugging configurations for VS Code. With next-kickstart, developers can jumpstart their Next.js projects without needing to spend time on initial setup and configuration.