Feature packed Next.js 13.5 (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)
View the repository branches for other feature sets (e.g. Bun)
- ๐๏ธ 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
- ๐ 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
- ๐งช 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
- ๐ 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
๐ Option 1: Clone and deploy with Vercel
๐ Option 2: Clone and run locally
- Fork this repository (uncheck 'Copy the
main
branch only` if you are interested in other branches / feature sets) - Clone your new repository
- 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
.dockerignore
docker/
- Dockerfile and docker-compose.yml for development and production
๐ก (requires enabling)
.github/workflows/ci.yml
- type-checking and linting (hence these errors are ignored innext.config.mjs
)
๐ก (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 databasesrc/lib/auth.ts
src/components/providers/theme-provider.tsx
src/components/ui/
src/components/theme-toggle.tsx
components.json
src/env.mjs
- configure environment variablesnext.config.mjs
- environment variables are validated at build-time
src/app/examples/client-component/page.tsx
- use in a client componentsrc/app/examples/server-component/page.tsx
- use in a server component
tsconfig.json
- all modifications from create-next-app are explained with commentstypes/reset.d.ts
- using ts-reset to increase type-safety
.vscode/extensions.json
- recommended workspace extensions.vscode/launch.json
- debug configurations.vscode/settings.json
- use project TypeScript version
๐ก (requires enabling)