updates

6 files changed, 203 insertions, 0 deletions

diff --git a/frameworks/nextjs-15/.claude/commands/analyze-performance.md b/frameworks/nextjs-15/.claude/commands/analyze-performance.md
new file mode 100644
index 0000000..fa7a1df
--- /dev/null
+++ b/frameworks/nextjs-15/.claude/commands/analyze-performance.md
@@ -0,0 +1,46 @@
+---
+allowed-tools: Bash, Read, Grep, Glob, Write
+description: Analyze app performance and generate optimization report
+---
+
+Perform a comprehensive performance analysis of the Next.js application:
+
+## Bundle Analysis
+
+1. Check if @next/bundle-analyzer is installed, install if needed
+2. Run build with ANALYZE=true to generate bundle analysis
+3. Identify large dependencies and opportunities for code splitting
+
+## Core Web Vitals Analysis
+
+1. Check for Web Vitals monitoring setup
+2. Analyze current implementation for:
+   - Largest Contentful Paint (LCP) issues
+   - Cumulative Layout Shift (CLS) problems
+   - First Input Delay (FID) / Interaction to Next Paint (INP)
+
+## Code Analysis
+
+1. Find components not using dynamic imports where appropriate
+2. Check image optimization (using next/image properly)
+3. Verify font optimization (using next/font)
+4. Analyze third-party script loading strategies
+5. Check for unnecessary client-side data fetching
+
+## Caching Analysis
+
+1. Review fetch caching strategies
+2. Check for proper use of revalidate
+3. Analyze static vs dynamic rendering choices
+
+## Generate Report
+
+Create a detailed performance report with:
+
+- Current bundle size metrics
+- Largest dependencies
+- Optimization opportunities ranked by impact
+- Specific code changes needed
+- Estimated performance improvements
+
+Save the report to `performance-report.md` with actionable recommendations.
diff --git a/frameworks/nextjs-15/.claude/commands/create-page.md b/frameworks/nextjs-15/.claude/commands/create-page.md
new file mode 100644
index 0000000..4572b9f
--- /dev/null
+++ b/frameworks/nextjs-15/.claude/commands/create-page.md
@@ -0,0 +1,23 @@
+---
+description: Create a new Next.js 15 App Router page with proper structure
+argument-hint: "[route-path] [page-type]"
+allowed-tools: Write, Read, Bash
+---
+
+Create a new Next.js 15 App Router page: $ARGUMENTS
+
+Follow Next.js 15 best practices:
+1. Create app/[route-path]/page.tsx with async params/searchParams
+2. Add loading.tsx with proper Suspense fallback
+3. Add error.tsx as Client Component with error boundary
+4. Include proper TypeScript types for route parameters
+5. Use Server Components by default
+6. Add proper metadata for SEO
+
+Page types available:
+- **default** - Standard page with basic layout
+- **dynamic** - Dynamic route with [id] parameter  
+- **protected** - Page with authentication check
+- **api** - API route handler
+
+Example: `/create-page dashboard/analytics dynamic`
diff --git a/frameworks/nextjs-15/.claude/commands/create-server-action.md b/frameworks/nextjs-15/.claude/commands/create-server-action.md
new file mode 100644
index 0000000..0e28d2b
--- /dev/null
+++ b/frameworks/nextjs-15/.claude/commands/create-server-action.md
@@ -0,0 +1,27 @@
+---
+allowed-tools: Write, Read, MultiEdit
+argument-hint: "<action-name> [model/entity]"
+description: Create a type-safe Server Action with validation and error handling
+---
+
+Create a Next.js 15 Server Action named "$ARGUMENTS" with:
+
+1. Proper 'use server' directive
+2. Zod schema for input validation
+3. Error handling and try-catch blocks
+4. Type-safe return values
+5. Authentication check (if applicable)
+6. Rate limiting setup
+7. Database operation (if entity provided)
+8. Cache revalidation (revalidatePath/revalidateTag)
+9. Proper TypeScript types throughout
+10. Example usage in a form component
+
+The Server Action should follow security best practices:
+
+- Input validation and sanitization
+- CSRF protection considerations
+- Proper error messages (don't leak sensitive info)
+- Audit logging for important operations
+
+Include both the server action file and an example client component that uses it with useActionState.
diff --git a/frameworks/nextjs-15/.claude/commands/migrate-to-app-router.md b/frameworks/nextjs-15/.claude/commands/migrate-to-app-router.md
new file mode 100644
index 0000000..8801147
--- /dev/null
+++ b/frameworks/nextjs-15/.claude/commands/migrate-to-app-router.md
@@ -0,0 +1,48 @@
+---
+allowed-tools: Read, Write, MultiEdit, Glob, Grep, TodoWrite
+argument-hint: "[page-path|all]"
+description: Migrate Pages Router components to App Router
+---
+
+Migrate Pages Router to App Router for: $ARGUMENTS
+
+## Migration Steps
+
+1. **Analyze Current Structure**
+   - Identify pages to migrate
+   - Check for getServerSideProps, getStaticProps, getStaticPaths
+   - Find _app.tsx and_document.tsx customizations
+
+2. **Create App Router Structure**
+   - Create corresponding app/ directory structure
+   - Convert pages to page.tsx files
+   - Extract layouts from _app.tsx
+
+3. **Migrate Data Fetching**
+   - getStaticProps → Direct fetch in Server Component
+   - getServerSideProps → Direct fetch in Server Component
+   - getStaticPaths → generateStaticParams
+   - API calls in useEffect → Keep in Client Component or move to Server
+
+4. **Update Routing Hooks**
+   - useRouter from next/router → next/navigation
+   - Update router.push() calls
+   - Handle query params with useSearchParams
+
+5. **Migrate Metadata**
+   - Head component → metadata export or generateMetadata
+   - Update SEO configuration
+
+6. **Handle Special Files**
+   - _app.tsx → app/layout.tsx
+   - _document.tsx → app/layout.tsx (html/body tags)
+   - _error.tsx → app/error.tsx
+   - 404.tsx → app/not-found.tsx
+
+7. **Test and Validate**
+   - Ensure all routes work
+   - Verify data fetching
+   - Check that layouts render correctly
+   - Test client-side navigation
+
+Create a migration log documenting all changes and any issues that need manual review.
diff --git a/frameworks/nextjs-15/.claude/commands/optimize-components.md b/frameworks/nextjs-15/.claude/commands/optimize-components.md
new file mode 100644
index 0000000..5e35740
--- /dev/null
+++ b/frameworks/nextjs-15/.claude/commands/optimize-components.md
@@ -0,0 +1,25 @@
+---
+allowed-tools: Read, MultiEdit, Grep, Glob
+description: Analyze and optimize React Server/Client Component boundaries
+---
+
+Analyze the current component structure and optimize the Server/Client Component boundaries:
+
+1. Find all components currently marked with 'use client'
+2. Analyze if they truly need client-side interactivity
+3. Identify components that can be converted to Server Components
+4. Find Server Components that are passing non-serializable props
+5. Suggest component composition patterns to minimize client JS
+6. Identify opportunities for:
+   - Moving data fetching to Server Components
+   - Extracting interactive parts into smaller Client Components
+   - Using children pattern to compose Server and Client Components
+
+Provide a detailed report with:
+
+- Current client/server component ratio
+- Components that can be optimized
+- Specific refactoring suggestions
+- Estimated bundle size reduction
+
+Focus on reducing the amount of JavaScript sent to the client while maintaining functionality.
diff --git a/frameworks/nextjs-15/.claude/commands/setup-testing.md b/frameworks/nextjs-15/.claude/commands/setup-testing.md
new file mode 100644
index 0000000..3c27df3
--- /dev/null
+++ b/frameworks/nextjs-15/.claude/commands/setup-testing.md
@@ -0,0 +1,34 @@
+---
+allowed-tools: Write, MultiEdit, Bash, Read
+argument-hint: "[jest|vitest|playwright|cypress]"
+description: Set up testing framework for Next.js 15
+model: claude-3-5-sonnet-20241022
+---
+
+Set up testing for Next.js 15 with framework: $ARGUMENTS (default: jest)
+
+Steps to complete:
+
+1. Install necessary dependencies
+2. Create configuration files (jest.config.js, vitest.config.ts, playwright.config.ts, or cypress.config.js)
+3. Set up test utilities and helpers
+4. Create example test files for:
+   - Client Components
+   - Server Components (with limitations noted)
+   - Server Actions
+   - API routes
+   - E2E user flows (if Playwright/Cypress)
+5. Add test scripts to package.json
+6. Configure GitHub Actions workflow for CI
+7. Set up code coverage reporting
+
+Ensure the testing setup:
+
+- Works with Next.js 15's App Router
+- Handles async components appropriately
+- Includes proper mocking for Next.js modules
+- Supports TypeScript
+- Includes accessibility testing setup
+- Has good defaults for performance
+
+Create a comprehensive testing guide in the project documentation.