nextjs-page-generator_skill
- TypeScript
0
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill ehtbanton/claudeskillsrepo --skill nextjs-page-generator- SKILL.md825 B
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
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.
