skills.rest
jorggerojas
jorggerojasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pages-router

Organize Next.js Pages Router pages under src/pages with dynamic routes and _app.tsx and _document.tsx configurations.

1|Updated Jan 12, 2026
Search Tags:#typescript#frontend#react#routing#nextjs#pages-router
One-click install
npx skills add https://github.com/jorggerojas/next-skeleton-page --skill pages-router
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pages-router
Source: https://github.com/jorggerojas/next-skeleton-page/tree/main/.cursor/skills/pages-router
Command: npx skills add https://github.com/jorggerojas/next-skeleton-page --skill pages-router

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill clarifies how to work with Next.js Pages Router by organizing pages under src/pages and correctly configuring _app.tsx and _document.tsx.

Core Features & Use Cases

  • Regular pages: src/pages/[filename].tsx map to /filename routes.
  • Dynamic routes: src/pages/[id]/page.tsx map to /[id] routes.
  • Special files: _app.tsx and _document.tsx under src/pages for global UI and HTML customization

Quick Start

Create or modify a page under src/pages and ensure _app.tsx and/or _document.tsx are configured, then run the dev server to preview changes.

Frequently Asked Questions about pages-router

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

FAQPage Schema
How do I organize Next.js Pages Router pages under src/pages?▼

Next.js Pages Router pages under src/pages map directly to routes, where src/pages/filename.tsx becomes /filename. This structure enforces consistent file placement and routing conventions for regular pages, dynamic routes, and special files.

How do I create dynamic routes in Next.js Pages Router?▼

Dynamic routes in the Next.js Pages Router are created by placing page files inside bracketed directories, such as src/pages/[id]/page.tsx, which maps to the /[id] route. This ensures proper file placement for dynamic URL parameters.

What is the purpose of _app.tsx and _document.tsx in Next.js?▼

_app.tsx and _document.tsx are special files under src/pages used in the Next.js Pages Router for global UI customization and HTML document structure. They enable consistent project-wide layout and markup configuration across all routes.

How to avoid App Router patterns when using Next.js Pages Router?▼

To avoid App Router patterns, strictly organize pages under src/pages and configure _app.tsx and _document.tsx. This enforces Next.js Pages Router conventions, preventing the use of the newer App Router structure.

Does the Next.js Pages Router support TypeScript configurations?▼

Yes, the Next.js Pages Router supports TypeScript configurations, allowing you to use .tsx extensions for regular pages, dynamic routes, and the global _app.tsx and _document.tsx files to ensure type-safe UI and HTML customization.

Related Skills

Explore More Software Engineering Skills→
BurburtonBurburton

nextjs-setup

Configure Next.js projects with routing, middleware, and configuration recommendations.

Community
Advanced
hasnahasna

next

Convert JSON UI specifications into Next.js applications with routing and SSR.

Official
Advanced
allthingslinuxallthingslinux
4

vercel-composition-patterns

Standardize React component composition with explicit variants and compound components.

Official
Intermediate
KlotzJesseKlotzJesse

nextjs-app-router-fundamentals

Migrate Next.js apps from Pages Router to App Router with routing patterns.

Community
Intermediate