create-n8-app

Create a new Next.js app with the N8 stack - a modern, full-stack template featuring:

• Next.js 16 - App Router, Server Components, Server Actions, Turbopack
• TypeScript - Strict mode enabled
• Tailwind CSS v4 - Modern CSS-first configuration
• Shadcn/ui - Beautiful, accessible components
• Drizzle ORM - Type-safe database queries
• Neon - Serverless PostgreSQL
• tRPC - End-to-end type safety
• TanStack Query - Powerful async state management
• Zustand - Lightweight global state
• NextAuth.js - Authentication with GitHub OAuth
• Vitest - Fast unit testing
• Prettier - Code formatting with Tailwind plugin

Usage

# With npm
npm create n8-app@latest my-app

# With pnpm
pnpm create n8-app@latest my-app

# With yarn
yarn create n8-app my-app

Options

npm create n8-app@latest my-app --skip-install  # Skip dependency installation
npm create n8-app@latest my-app --skip-git      # Skip git initialization

After Creation

1. Set up your database

   • Create a Neon project at neon.tech
   • Copy the connection string to .env.local

2. Set up GitHub OAuth

   • Create an OAuth App at github.com/settings/developers
   • Set callback URL to http://localhost:3000/api/auth/callback/github
   • Copy Client ID and Secret to .env.local

3. Generate a secret

   openssl rand -base64 32

   Add to .env.local as AUTH_SECRET

4. Run database migrations

   pnpm db:generate
   pnpm db:push

5. Start developing

   pnpm dev

Project Structure

my-app/
├── app/                    # Next.js App Router
│   ├── api/               # API routes (tRPC, auth)
│   ├── auth/              # Auth pages
│   ├── globals.css        # Tailwind styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── providers.tsx      # Client providers
├── components/            # React components
│   ├── auth/             # Auth components
│   └── ui/               # Shadcn components
├── hooks/                 # Custom React hooks
├── lib/                   # Utility functions
│   ├── auth.ts           # NextAuth config
│   ├── db.ts             # Database client
│   ├── env.ts            # Environment validation
│   ├── trpc.ts           # tRPC client
│   └── utils.ts          # Utilities
├── server/                # Server-side code
│   ├── api/              # tRPC routers
│   └── db/               # Database schema
├── stores/                # Zustand stores
├── tests/                 # Test files
├── drizzle/               # Database migrations
└── public/                # Static assets

Scripts

| Command | Description | |---------|-------------| | pnpm dev | Start development server with Turbopack | | pnpm build | Build for production | | pnpm start | Start production server | | pnpm lint | Run ESLint | | pnpm format | Format code with Prettier | | pnpm test | Run tests with Vitest | | pnpm db:generate | Generate Drizzle migrations | | pnpm db:push | Push schema to database | | pnpm db:studio | Open Drizzle Studio |

Development

Adding Shadcn Components

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input

Creating tRPC Routes

Add new routers in server/api/routers/ and register them in server/api/root.ts.

Using Zustand

See stores/example-store.ts for patterns. Remember:

• Use React Query for server data
• Use Zustand only for client state (UI, preferences, cart)

License

MIT