stack/profiles/tech-stacks/nextjs-fullstack.json

{
  "name": "Next.js Fullstack",
  "description": "Next.js 14+ with App Router, TypeScript, Tailwind CSS, and modern fullstack development",
  "filePatterns": ["*.tsx", "*.ts", "*.jsx", "*.js"],
  "excludePatterns": ["*.test.tsx", "*.test.ts", "*.spec.tsx", "*.spec.ts", "*.d.ts"],
  "techStack": {
    "framework": "Next.js 14+ with App Router",
    "language": "TypeScript",
    "styling": "Tailwind CSS",
    "database": "Prisma + PostgreSQL",
    "authentication": "NextAuth.js",
    "stateManagement": "Zustand + React Query",
    "testing": "Jest + React Testing Library",
    "deployment": "Vercel",
    "api": "Next.js API Routes / Server Actions"
  },
  "conventions": {
    "naming": {
      "components": "PascalCase (UserProfile.tsx)",
      "pages": "lowercase with hyphens (user-profile/page.tsx)",
      "apiRoutes": "lowercase with hyphens (api/user-profile/route.ts)",
      "hooks": "camelCase with use prefix (useAuth.ts)",
      "utilities": "camelCase (formatDate.ts)",
      "constants": "UPPER_SNAKE_CASE",
      "types": "PascalCase with T prefix"
    },
    "fileStructure": {
      "appRouter": "app/{route}/page.tsx, layout.tsx",
      "apiRoutes": "app/api/{endpoint}/route.ts",
      "components": "components/{feature}/{ComponentName}.tsx",
      "hooks": "hooks/use{HookName}.ts",
      "libs": "lib/{utility}.ts",
      "types": "types/{feature}.types.ts",
      "prisma": "prisma/schema.prisma, prisma/migrations/",
      "tests": "__tests__/{ComponentName}.test.tsx"
    },
    "imports": {
      "style": "Absolute imports with @ prefix",
      "grouping": "React/Next, third-party, internal, relative",
      "sorting": "Alphabetical within groups"
    }
  },
  "qualityChecks": {
    "lint": {
      "command": "npx eslint --fix",
      "config": "Next.js ESLint + TypeScript",
      "autoFix": true
    },
    "format": {
      "command": "npx prettier --write",
      "config": "80 character line limit",
      "autoFix": true
    },
    "build": {
      "command": "npm run build",
      "checkTypes": true,
      "failOnError": true
    },
    "test": {
      "unit": "npm test",
      "coverage": "npm run test:coverage",
      "minimumCoverage": 75
    }
  },
  "codePatterns": {
    "page": {
      "structure": "Default export function with metadata",
      "metadata": "Use generateMetadata for dynamic SEO",
      "loading": "Create loading.tsx for loading states",
      "error": "Create error.tsx for error boundaries",
      "notFound": "Create not-found.tsx for 404 handling"
    },
    "layout": {
      "structure": "Root layout with html and body tags",
      "metadata": "Define default metadata and viewport",
      "providers": "Wrap children with necessary providers",
      "fonts": "Use next/font for font optimization"
    },
    "component": {
      "client": "Use 'use client' directive for client components",
      "server": "Default to server components when possible",
      "props": "Define TypeScript interfaces for props",
      "memo": "Use React.memo for performance when needed"
    },
    "apiRoute": {
      "structure": "Export named functions (GET, POST, etc.)",
      "params": "Use typed params and searchParams",
      "responses": "Return NextResponse with proper status codes",
      "middleware": "Use middleware for auth and validation"
    },
    "serverActions": {
      "directive": "Use 'use server' directive",
      "validation": "Validate input data with zod",
      "revalidation": "Use revalidatePath/revalidateTag",
      "errors": "Handle errors gracefully"
    },
    "database": {
      "prisma": "Use Prisma Client for database operations",
      "transactions": "Use Prisma transactions for complex operations",
      "migrations": "Use Prisma migrate for schema changes",
      "seeding": "Create seed scripts for development data"
    }
  },
  "context7Libraries": [
    "next",
    "react",
    "@next/font",
    "next-auth",
    "@prisma/client",
    "prisma",
    "tailwindcss",
    "zustand",
    "@tanstack/react-query",
    "zod"
  ],
  "commonImports": {
    "page": ["import { Metadata } from 'next';", "import { notFound } from 'next/navigation';"],
    "component": [
      "import React from 'react';",
      "import Link from 'next/link';",
      "import Image from 'next/image';"
    ],
    "apiRoute": [
      "import { NextRequest, NextResponse } from 'next/server';",
      "import { getServerSession } from 'next-auth';"
    ],
    "serverAction": [
      "import { revalidatePath } from 'next/cache';",
      "import { redirect } from 'next/navigation';"
    ]
  },
  "bestPractices": [
    "Use App Router instead of Pages Router for new projects",
    "Default to Server Components, use Client Components only when needed",
    "Use Next.js Image component for optimized images",
    "Implement proper SEO with metadata API",
    "Use Server Actions for form handling and mutations",
    "Implement proper error handling with error boundaries",
    "Use Prisma for type-safe database operations",
    "Implement proper authentication with NextAuth.js",
    "Use Tailwind CSS for styling with design system approach",
    "Implement proper loading states and skeleton screens"
  ],
  "seoOptimization": [
    "Use generateMetadata for dynamic meta tags",
    "Implement proper Open Graph and Twitter Card tags",
    "Use structured data (JSON-LD) where appropriate",
    "Implement proper canonical URLs",
    "Use Next.js Image component with alt text",
    "Implement proper heading hierarchy",
    "Use semantic HTML elements",
    "Generate sitemap.xml and robots.txt",
    "Implement proper internal linking",
    "Optimize Core Web Vitals"
  ],
  "performanceOptimizations": [
    "Use Next.js Image component with proper sizing",
    "Implement code splitting with dynamic imports",
    "Use React.lazy and Suspense for component lazy loading",
    "Optimize fonts with next/font",
    "Use streaming with loading.tsx files",
    "Implement proper caching strategies",
    "Use ISR (Incremental Static Regeneration) when appropriate",
    "Optimize bundle size with proper imports",
    "Use web workers for heavy computations",
    "Implement proper database query optimization"
  ]
}