nextjs-integration

# nextjs-integration

## Instructions

This skill provides complete Clerk authentication integration for Next.js applications, supporting both App Router (Next.js 13+) and Pages Router patterns. It covers installation, middleware configuration, authentication helpers, and protected route patterns.

### 1. Clerk Installation & Setup

Install Clerk SDK and configure environment variables:

```bash
# Run automated installation script
bash ./skills/nextjs-integration/scripts/install-clerk.sh

# Or manually install
npm install @clerk/nextjs
```

**Environment Variables:**
```bash
# Create .env.local with Clerk credentials
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key_here
CLERK_SECRET_KEY=sk_test_your_key_here

# Optional: Customize sign-in/sign-up URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding
```

**What This Does:**
- Installs @clerk/nextjs package
- Creates .env.local with placeholder keys
- Configures redirect URLs for sign-in/sign-up flows
- Sets up authentication endpoints

### 2. App Router Integration

Configure Clerk for Next.js App Router (13.4+):

```bash
# Run App Router setup script
bash ./skills/nextjs-integration/scripts/setup-app-router.sh
```

**Files Created:**
- `middleware.ts` - Route protection at edge
- `app/layout.tsx` - ClerkProvider wrapper
- `app/sign-in/[[...sign-in]]/page.tsx` - Sign-in page
- `app/sign-up/[[...sign-up]]/page.tsx` - Sign-up page

**App Router Features:**
- Server Components with `auth()` helper
- Client Components with `useAuth()` hook
- Edge middleware for route protection
- Automatic session management
- RSC-compatible authentication

**Copy Template Files:**
```bash
# Middleware configuration
cp ./skills/nextjs-integration/templates/app-router/middleware.ts ./middleware.ts

# Root layout with ClerkProvider
cp ./skills/nextjs-integration/templates/app-router/layout.tsx ./app/layout.tsx
```