NextJS Skill

Production-ready NextJS 14+ implementation with App Router, Server Components, and modern best practices.

Purpose

Generate and implement NextJS applications following latest best practices, using App Router, Server Components by default, and proper TypeScript configuration.

When to Use

Activates when user mentions:

• "NextJS" or "Next.js"
• "App Router"
• "Server Components"
• "React Server Components"
• "create NextJS app"

What It Does

1. Creates Project Structure:

   • NextJS 14+ with App Router
   • TypeScript strict mode
   • ESLint + Prettier configured
   • Tailwind CSS + shadcn/ui

2. Implements Authentication:

   • NextAuth.js v5 (Auth.js)
   • Credential + OAuth providers
   • Session management
   • Protected routes

3. Database Integration:

   • Prisma ORM
   • Database schema
   • Migrations
   • Type-safe queries

4. Production Configuration:

   • Environment variables
   • API routes with error handling
   • SEO metadata
   • Image optimization
   • Production builds

Example Usage

User: "Create a NextJS app with authentication and Postgres"

nextjs skill:

Creating NextJS 14 App Router project with authentication...

✅ Project structure:
app/
  (auth)/
    login/page.tsx
    register/page.tsx
  (dashboard)/
    dashboard/page.tsx
  api/
    auth/[...nextauth]/route.ts
  layout.tsx
  page.tsx

✅ Configured:
- TypeScript (strict mode)
- NextAuth.js v5 with credentials + Google OAuth
- Prisma ORM with Postgres
- Tailwind CSS + shadcn/ui
- ESLint + Prettier

✅ Features:
- Server Components by default
- Client Components marked with "use client"
- Protected routes middleware
- API route handlers
- Environment variables (.env.local)

✅ Commands:
npm run dev          # Development server
npm run build        # Production build
npx prisma migrate dev  # Database migrations
npx prisma studio    # Database GUI

Next steps:
1. Set DATABASE_URL in .env.local
2. Set NEXTAUTH_SECRET in .env.local
3. Run prisma migrate dev
4. Start development: npm run dev

Key Features

App Router Structure

app/
  layout.tsx          # Root layout
  page.tsx            # Home page
  (auth)/             # Auth group
    login/page.tsx
  (dashboard)/        # Protected group
    layout.tsx        # Authenticated layout
    dashboard/page.tsx
  api/
    auth/[...nextauth]/route.ts
    users/route.ts

Server Components (Default)

// app/dashboard/page.tsx - Server Component
import { prisma } from '@/lib/prisma'

export default async function DashboardPage() {
  const users = await prisma.user.findMany()  // Direct DB query

  return <div>{users.length} users</div>
}

Client Components (When Needed)

// app/components/Counter.tsx - Client Component
'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

API Routes

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'

export async function GET(request: NextRequest) {
  try {
    const users = await prisma.user.findMany()
    return NextResponse.json(users)
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch users' },
      { status: 500 }
    )
  }
}

Production Checklist

• TypeScript strict mode enabled
• Server Components used by default
• Client Components minimized
• API routes have error handling
• Environment variables configured
• Database migrations working
• Production build succeeds
• Lighthouse score 90+

Integration

Works with:

• hetzner-provisioner - Deploys to Hetzner
• stripe-integrator - Adds payments
• calendar-system - Adds booking
• notification-system - Adds notifications