nxt-page

Generate Next.js Page

Create a complete Next.js App Router page set for the route provided in $ARGUMENTS.

Parse $ARGUMENTS as the route path (e.g. dashboard/settings, blog/[slug], shop/[category]/[id]).

Step 1 — Detect Project Structure

Check whether the project uses App Router or Pages Router:

• If app/ directory exists → App Router
• If pages/ directory exists → Pages Router
• If both exist → prefer App Router

If Pages Router is detected, stop and inform the user that this command supports App Router only.

Find the app directory root:

• app/, src/app/

Step 2 — Analyze Existing Pages

Read 2–3 existing page.tsx files from the project:

Glob: {app,src/app}/**/page.tsx

Detect:

• Import patterns (aliased imports with @/ vs relative)
• Whether pages use async server components
• Whether pages pass params and searchParams props
• Metadata pattern (export const metadata vs generateMetadata)
• Layout usage patterns

Step 3 — Parse Route Segments

Analyze the route path from $ARGUMENTS:

• Static segment: dashboard → folder dashboard/
• Dynamic segment: [slug] → folder [slug]/ with params.slug
• Catch-all: [...slug] → params.slug is string[]
• Optional catch-all: [[...slug]] → params.slug is string[] | undefined
• Route groups: (group)/route → folder (group)/route/

Build the full output path: {app_root}/{route_path}/

Step 4 — Generate page.tsx

Generate an async Server Component:

import type { Metadata } from "next"

// Only include if dynamic params exist:
interface PageProps {
  params: Promise<{ {param}: string }>
  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>
}

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

// With dynamic params:
export default async function {SegmentName}Page({ params }: PageProps) {
  const { {param} } = await params

  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold">{Page Title}</h1>
    </main>
  )
}

// Without dynamic params:
export default async function {SegmentName}Page() {
  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold">{Page Title}</h1>
    </main>
  )
}