home / skills / ehtbanton / claudeskillsrepo / nextjs-page-generator

nextjs-page-generator skill

safe

This skill generates complete Next.js 14 App Router page components with server and client patterns, data fetching, and layout files.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill nextjs-page-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

825 B

---
name: nextjs-page-generator
description: Generate Next.js page components with App Router, Server Components, and data fetching. Triggers on "create nextjs page", "generate next.js route", "nextjs app router page", "next page component".
---

# Next.js Page Generator

Generate Next.js page components using App Router with Server/Client Components and data fetching.

## Output Requirements

**File Output:** `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`
**Format:** Valid Next.js 14 TypeScript
**Standards:** Next.js App Router conventions

## When Invoked

Immediately generate complete Next.js page files with appropriate patterns for the use case.

## Example Invocations

**Prompt:** "Create Next.js page for product listing"
**Output:** Complete `app/products/page.tsx` with Server Component data fetching.

Overview

This skill generates complete Next.js App Router page components in TypeScript, including page.tsx, layout.tsx, loading.tsx, and error.tsx. It supports Server Components, Client Components, and common data fetching patterns targeted to Next.js 14 conventions. Use it to scaffold fully working route folders that follow App Router best practices.

How this skill works

On trigger, the skill produces a folder-level set of files (page.tsx, layout.tsx, loading.tsx, error.tsx) with valid TypeScript and Next.js conventions. It chooses Server Components by default, inserts data fetching logic (fetch, getServerSideProps-like patterns adapted for App Router), and marks client components with 'use client' when necessary. The output is ready to drop into an app/ route and integrates typical error and loading UI patterns.

When to use it

Scaffolding a new route with App Router and Server Components.
Creating a product, blog, or dashboard page that needs server-side data fetching.
Generating consistent layout and error/loading handling for a route.
Rapid prototyping of pages that follow Next.js 14 conventions.
Converting existing pages to App Router structure.

Best practices

Default to Server Components for data fetching and mark interactive parts with 'use client'.
Keep layout.tsx focused on shared UI and context providers, not API calls.
Implement loading.tsx and error.tsx to provide resilient UX for streamed/async data.
Return typed props and use TypeScript interfaces for fetched data.
Avoid mixing client-side state in server-rendered components; isolate interactivity.

Example use cases

Create app/products/page.tsx that fetches a product list on the server and renders a server component grid.
Generate app/blog/[slug]/page.tsx with async data fetching for a blog post and a client comment form component.
Scaffold app/dashboard/layout.tsx with a sidebar and authentication provider wrapped around pages.
Produce app/search/page.tsx with server-side search results and a client-side filter control.

FAQ

Does the skill produce TypeScript only?

Yes. Output files are valid TypeScript tailored for Next.js App Router and modern typing patterns.

Will it create client-side interactivity?

Interactive parts are generated as separate Client Components with 'use client', while data fetching and rendering default to Server Components.