create-n8-app

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

• Set up your database

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

• 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

• Generate a secret

  openssl rand -base64 32
  

  Add to .env.local as AUTH_SECRET

• Run database migrations

  pnpm db:generate
  pnpm db:push
  

• 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