DevelopmentMédio

Next.js App Router Fundamentals

porwsimmonds·wsimmonds· v1.0.0 · atualizado em 2026-04-10

Score

Guide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling metadata, or building Next.js 13+ applications. Activates for App Router migration, layout creation, routing patterns, or Next.js 13+ development tasks.

nextjsreactapp-routerfrontend-developmenttypescriptroutinglayouts

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdnextjs-app-router-fundamentals/workflow

Analyze Existing Structure: — Examine the `pages/` directory, `_app.tsx`, and `_document.tsx` to understand the current routing and layout setup.

Create Root Layout: — Create `app/layout.tsx` and migrate HTML structure and global providers from `_document.tsx` and `_app.tsx`.

Migrate Pages to Routes: — Move components from `pages/` to `app/` directory, creating `page.tsx` files for each route.

Update Navigation: — Replace `<a>` tags with `<Link>` components from `next/link`.

Implement Metadata: — Use the `metadata` export in `page.tsx` or `layout.tsx` to define page titles, descriptions, and other metadata.

Clean Up Pages Directory: — Remove files from the `pages/` directory after migration.

Test and Validate: — Test all routes and functionality to ensure successful migration.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

60%

Árvore do Skill

Next.js App Router Fundamentals

nextjs-app-router-fundamentals

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.RECOMMEND

4.ACT

5.REFLECT

Triggers8

migrate to Next.js App Routercreate a layout in Next.js 13implement routing with Next.js App Routerhandle metadata in Next.js 13build a Next.js 13 applicationuse Next.js file-based routingcreate dynamic routes in Next.jsmigrate from pages router to app router

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download nextjs-app-router-fundamentals

$ synaptic skills detail nextjs-app-router-fundamentals

$ synaptic skills live nextjs-app-router-fundamentals

Dependências

next react typescript

Links

GitHub Repository