New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Nextjs Pages Router

by HoangNguyen0403 in HoangNguyen0403/agent-skills-standard

Implement Pages Router data fetching with getServerSideProps, getStaticProps, and API routes in Next.js legacy projects.

MITAuto-check passedFrontend & Design

Install Nextjs Pages Router

skills CLI
$ npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-pages-router -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install HoangNguyen0403/agent-skills-standard nextjs-pages-router --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/nextjs/nextjs-pages-router .claude/skills/nextjs-pages-router && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nextjs-pages-router
GitHub stars
572
Token cost
~737 tokens
SKILL.md length
275 words
Files
5 (incl. references)
Skills in repo
211
Repo updated
First seen
Licence
MIT

At a glance

Implement Pages Router data fetching with getServerSideProps, getStaticProps, and API routes in Next.js legacy projects.

  • Works in 4 steps: Create page file — Add… → Add data fetching — Export… → Import service directly — Never fetch… → …
  • Working in a pages/ directory project
  • SKILL.md covers Priority: P0 (CRITICAL), Workflow: Add Server-Rendered…, getServerSideProps Example and Implementation Guidelines, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Nextjs Pages Router is an agent skill from HoangNguyen0403/agent-skills-standard. Implement Pages Router data fetching with getServerSideProps, getStaticProps, and API routes in Next.js legacy projects. Use when working in a pages/ directory project, adding SSR/SSG data fetching, or creating API routes.

Its SKILL.md is about 740 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `evals/evals.json`, `references/feature-sliced-design-pages.md` and `references/implementation.md`).

It sits in Frontend & Design. It works with Next.js. The repository describes itself as: A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages. The licence is MIT.

When your agent uses it

  • Working in a pages/ directory project
  • Adding SSR/SSG data fetching
  • Creating API routes

Example prompts

  • “/nextjs-pages-router”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Create page file — Add pages/posts/[id].tsx.
  2. Add data fetching — Export getServerSideProps or getStaticProps + getStaticPaths.
  3. Import service directly — Never fetch your own /api routes from server-side hooks.
  4. Type props — Use InferGetServerSidePropsType.

What it can do on your machine

Read from SKILL.md and the folder at commit b529c2d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nextjs Pages Router loads about 737 tokens when it runs, and up to ~1.3k if it reads all its reference files. Until then it costs about 61 tokens; SKILL.md has 275 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~737
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from HoangNguyen0403/agent-skills-standard at commit b529c2d, republished under its MIT licence (© HoangNguyen0403). 275 words, ~737 tokens.

Download SKILL.mdSave it as .claude/skills/nextjs-pages-router/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
nextjs-pages-router
description
Implement Pages Router data fetching with getServerSideProps, getStaticProps, and API routes in Next.js legacy projects. Use when working in a pages/ directory project, adding SSR/SSG data fetching, or creating API routes.

Next.js Pages Router (Legacy)

Priority: P0 (CRITICAL)

[!IMPORTANT] project uses Next.js Pages Router (pages/ directory). NOT use App Router features.

Workflow: Add Server-Rendered Page

  1. Create page file — Add pages/posts/[id].tsx.
  2. Add data fetching — Export getServerSideProps or getStaticProps + getStaticPaths.
  3. Import service directly — Never fetch your own /api routes from server-side hooks.
  4. Type props — Use InferGetServerSidePropsType<typeof getServerSideProps>.

getServerSideProps Example

See implementation examples

Implementation Guidelines

  • Routing Architecture: Use pages/ directory. Use _app.tsx for global state/layouts and _document.tsx for custom HTML attributes. Define dynamic routes using brackets [id].tsx or catch-all [...slug].tsx.
  • Data Fetching (SSR/SSG): Use getServerSideProps (for every request) or getStaticProps (at build time) with getStaticPaths for dynamic routes. Export these as standalone async functions.
  • Logic Isolation: Never fetch your own /api endpoints from Server-Side hooks. Import service layer or DB logic directly.
  • Client Hooks: Use useRouter() from next/router for navigation and access to query params. Use router.push() or <Link> for client-side routing.
  • APIs: Implement API Routes in pages/api/ for server-only logic or webhooks. Standardize responses with appropriate HTTP status codes.
  • Next.js 15+ Compatibility: cautious of Next.js 15 upgrades; ensure all getServerSideProps return objects that match expected PageProps.
  • Styling: Standardize via CSS Modules (*.module.css) or Tailwind CSS. Avoid global CSS unless imported in _app.tsx.

Anti-Patterns

  • No fetching own /api routes from SSR: Import service layer directly.
  • No global CSS outside _app.tsx: Use CSS Modules or Tailwind for scoped styles.
  • No App Router features in Pages Router projects: Avoid app/ directory patterns.

References

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

  • Create pages/posts/[id],create
  • GetServerSidePropsContext) { const data = await getUser(context,data
  • access via router,access

© HoangNguyen0403, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in skills/nextjs/nextjs-pages-router of HoangNguyen0403/agent-skills-standard.

  • SKILL.md
  • evals/evals.json
  • references/feature-sliced-design-pages.md
  • references/implementation.md
  • references/server-side-props.md

Open the folder on GitHubat commit b529c2d

Compare with similar skills

Nextjs Pages Router next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nextjs Pages Router compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nextjs Pages Router this skillHoangNguyen0403/agent-skills-standard572—~737Automated safety check: PassMIT
Turnstile Spincloudflare/skills3k4 repos~7.2kAutomated safety check: NotesApache-2.0
Sanity Best Practicesrobotostudio/turbo-start-sanity183—~940Automated safety check: PassMIT
NEAR dApp Builderinternet-court/internet-court-skill6.6k1 repos~684Automated safety check: PassCustom licence
Frontend Playbookaustintgriffith/ethskills295—~3.4kAutomated safety check: NotesNone
Supabase Authtextura-agency/next16-claude-starter133—~1.4kAutomated safety check: PassUnlicense

Similar skills

  • Turnstile Spin

    cloudflare/skills

    Official

    Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

    3k GitHub starsUsed in 4 repos~7.2k tokens
    Frontend & DesignAuto-check: notes

  • Sanity Best Practices

    robotostudio/turbo-start-sanity

    Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and…

    183 GitHub stars~940 tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • NEAR dApp Builder

    internet-court/internet-court-skill

    Scaffolds new NEAR dApps with create-near-app or adds NEAR wallet sign-in, contract calls and transaction signing to an existing React or plain JavaScript app.

    6.6k GitHub starsUsed in 1 repo~684 tokens
    Frontend & DesignAuto-check passed

  • Frontend Playbook

    austintgriffith/ethskills

    The complete build-to-production pipeline for Ethereum dApps.

    295 GitHub stars~3.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes

  • Supabase Auth

    textura-agency/next16-claude-starter

    Wire Supabase Auth into this Next.js 16 app with @supabase/ssr — browser/server clients, the proxy.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and…

    133 GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Doctype

    thedaviddias/Front-End-Checklist

    A skill your agent uses when applies to all HTML documents. An agent skill from thedaviddias/Front-End-Checklist.

    74k GitHub stars~831 tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

More from HoangNguyen0403/agent-skills-standard

All 211 skills in this repo

  • Subagent-Driven Development

    HoangNguyen0403/agent-skills-standard

    Runs a multi-task implementation plan by sending each task to a fresh implementer subagent, reviewing it independently, then reviewing the whole branch.

    572 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • draw.io Architecture Diagramming

    HoangNguyen0403/agent-skills-standard

    Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes.

    572 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Android Navigation 3 Guide

    HoangNguyen0403/agent-skills-standard

    Implements and migrates to Jetpack Navigation 3 in Compose: NavDisplay, typed route objects, a state-list back stack, deep links, multiple back stacks and dialog scenes.

    572 GitHub stars~687 tokensUpdated yesterday
    Auto-check passed

  • Angular HttpClient Standards

    HoangNguyen0403/agent-skills-standard

    Sets rules for Angular HTTP code: functional interceptors, typed requests, services that own every call, and httpResource for reactive data loading in Angular 17+.

    572 GitHub stars~652 tokensUpdated yesterday
    Auto-check passed

  • Angular Tooling

    HoangNguyen0403/agent-skills-standard

    Angular CLI usage, code generation, build configuration, and bundle optimization.

    572 GitHub stars~743 tokensUpdated yesterday
    Auto-check passed

  • Common Code Review

    HoangNguyen0403/agent-skills-standard

    Conduct high-quality, persona-driven code reviews. An agent skill from HoangNguyen0403/agent-skills-standard.

    572 GitHub stars~772 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Nextjs Pages Router

What does Nextjs Pages Router do?

Implement Pages Router data fetching with getServerSideProps, getStaticProps, and API routes in Next.js legacy projects. Nextjs Pages Router is an agent skill from HoangNguyen0403/agent-skills-standard.js legacy projects.

When should I use Nextjs Pages Router?

Nextjs Pages Router fits situations like: working in a pages/ directory project; adding SSR/SSG data fetching; creating API routes.

How do I install Nextjs Pages Router in Claude Code?

Run `npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-pages-router -a claude-code`. Or copy the skill folder (skills/nextjs/nextjs-pages-router in HoangNguyen0403/agent-skills-standard) into .claude/skills/nextjs-pages-router in your project. Claude Code loads it when a task matches its description.

How do I install Nextjs Pages Router in Codex?

Run `npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-pages-router -a codex`. Or copy the skill folder (skills/nextjs/nextjs-pages-router in HoangNguyen0403/agent-skills-standard) into .agents/skills/nextjs-pages-router in your project. Codex loads it when a task matches its description.

Can I use Nextjs Pages Router in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-pages-router -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextjs-pages-router, .gemini/skills/nextjs-pages-router, .github/skills/nextjs-pages-router and .opencode/skills/nextjs-pages-router in your project.

What does Nextjs Pages Router need to run?

SKILL.md names no scripts, command-line tools or credentials: Nextjs Pages Router is instructions for the agent only.

Does Nextjs Pages Router access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Nextjs Pages Router safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Nextjs Pages Router use?

Nextjs Pages Router is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nextjs Pages Router use?

About 737 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 552 tokens, read only when the agent opens those files.

What are the alternatives to Nextjs Pages Router?

Skills that share tags, products or a category with Nextjs Pages Router: Turnstile Spin (cloudflare/skills, 3k stars), Sanity Best Practices (robotostudio/turbo-start-sanity, 183 stars), NEAR dApp Builder (internet-court/internet-court-skill, 6.6k stars) and Frontend Playbook (austintgriffith/ethskills, 295 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nextjs Pages Router?

HoangNguyen0403 (a GitHub user) maintains it in HoangNguyen0403/agent-skills-standard, which has 572 GitHub stars. The repository holds 211 skills in this directory. The repository was last updated on October 9, 2026.

Source: HoangNguyen0403/agent-skills-standard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.