> nextjs-pages-router
Legacy routing, getServerSideProps conventions, and strict architectural constraints. (triggers: pages/**/*.tsx, pages/**/*.ts, Pages Router, getServerSideProps, getStaticProps, _app, useRouter)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-pages-router?format=md"Next.js Pages Router (Legacy)
Priority: P0 (CRITICAL)
[!IMPORTANT] The project uses Next.js Pages Router (
pages/directory). Do NOT use App Router features.
Architecture Constraints
- Thin Pages: Files in
pages/must be extremely thin routing wrappers. - Routing Rules: Dynamic uses
[id].tsx, Catch-all uses[...slug].tsx. - API Routes: Code inside
pages/api/runs strictly on the server.
Data Fetching
- Server-Side: Use
getServerSideProps(SSR) orgetStaticProps(SSG). Export as standalone async function. - Client-Side: Rely on SWR, React Query, Redux, or
fetchinuseEffect.
🚫 Anti-Patterns
- Hallucinating Next 13+:
export default async function Page()is FATAL. Pages must be synchronous React components. - API Fetching in SSR: Do NOT do an HTTP fetch to your own
pages/apiendpoint inside SSR. Directly import the service logic instead. - "use client" directives: Do NOT use them. Everything here is implicitly a client component.
References
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)