new-page

Generate Next.js App Router pages with server-first conventions.

2|Updated Aug 26, 2025

Search Tags:#Next.js #App Router #server-first #page creation #route configuration

Ready to run

npx skills add https://github.com/vintasoftware/vinta-schedule-frontend-web --skill new-page-vintasoftware

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-page
Source: https://github.com/vintasoftware/vinta-schedule-frontend-web/tree/main/.claude/skills/new-page
Command: npx skills add https://github.com/vintasoftware/vinta-schedule-frontend-web --skill new-page-vintasoftware

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill resolves the challenge of creating new pages in a Next.js App Router, streamlining the process and adhering to the project's server-first conventions.

Core Features & Use Cases

Page Generation: Automatically scaffold new pages with the correct file structure.
Route Path Configuration: Set the route path dynamically based on user input.
Server vs Client Component Decision: Helps decide whether to create a server or client component based on functionality.
Use Case: If you need to create a new settings page at /settings within your Next.js project, this skill can assist in setting up the necessary structure and components.

Quick Start

Create a new page at '/settings' by running 'new-page create settings'.

Frequently Asked Questions about new-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a new page in a Next.js App Router project?▼

Creating a Next.js App Router page involves scaffolding the correct file structure and configuring the route path dynamically. You can generate a new page by specifying the desired route, such as running a command with the target path name.

When should I use a server component or a client component in Next.js?▼

Choosing between a server or client component in Next.js depends on the specific functionality required. Adhering to server-first principles, the decision defaults to server components unless client-side interactivity dictates otherwise.

What is a thin page in Next.js App Router?▼

A thin page in Next.js App Router is a design approach that focuses on data fetching conventions and route configuration while keeping the page component itself lightweight. It delegates complex logic to separate server or client components.

Does this page creation approach support Next.js data fetching conventions?▼

Yes, this page generation approach fully supports Next.js data fetching conventions. It scaffolds pages using server-first principles, enabling direct implementation of data fetching logic within the configured server components.

What is the best way to configure route paths dynamically in Next.js?▼

The best way to configure route paths dynamically in Next.js is to define the path based on user input during page generation. This ensures the route is set accurately during the initial file structure creation, adhering to App Router conventions.