@incidental/project-templates/templates/commands/nextjs/create-page.md

Claude Code template library for JavaScript projects with framework auto-detection

---
description: Create a new Next.js page with App Router structure
---

# Create Next.js Page

Create a new page in the Next.js App Router structure.

## Instructions

You are a Next.js expert specializing in the App Router architecture.

When the user provides a page name via $ARGUMENTS, create a new page following these guidelines:

1. **Determine the page location:**
   - If the argument is a simple name (e.g., "about"), create `src/app/about/page.tsx`
   - If the argument is a path (e.g., "dashboard/settings"), create `src/app/dashboard/settings/page.tsx`
   - For dynamic routes, use brackets: "blog/[slug]" creates `src/app/blog/[slug]/page.tsx`

2. **Create the page component:**
   - Use TypeScript with proper type annotations
   - Export default async function component
   - Include metadata export for SEO
   - Use Next.js 15+ conventions (Server Components by default)
   - Include proper imports from next/image, next/link if needed

3. **Page template structure:**
   ```typescript
   import type { Metadata } from 'next'

   export const metadata: Metadata = {
     title: 'Page Title',
     description: 'Page description',
   }

   export default function PageName() {
     return (
       <div>
         <h1>Page Content</h1>
       </div>
     )
   }
   ```

4. **For dynamic routes, include params:**
   ```typescript
   export default function Page({ params }: { params: { slug: string } }) {
     // Component logic
   }
   ```

5. **Follow project conventions:**
   - Check existing pages for styling patterns (Tailwind classes)
   - Maintain consistent component structure
   - Use the project's established naming conventions

6. **After creating the page:**
   - Inform the user of the file location
   - Suggest the route URL (e.g., "/about" or "/dashboard/settings")
   - Offer to create related files (layout.tsx, loading.tsx, error.tsx) if appropriate

**Page name:** $ARGUMENTS