# Update Docs > Flujo guiado para actualizar la documentación de Next.js según los cambios de código. Úsalo al preguntar qué documentación hace falta, sincronizar docs con código o documentar una funcionalidad. Fuente: https://skillsagentes.com/skills/vercel/next.js/update-docs Markdown: https://skillsagentes.com/skills/vercel/next.js/update-docs.md Repositorio: https://github.com/vercel/next.js Autor: vercel Licencia: MIT Actualizado: hace 3 meses Coste de contexto: 131 tok instalada, 1.9k tok al activarse, 5.3k tok con todos los archivos del bundle Bundle: 3 archivos, 21 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add vercel/next.js --skill update-docs --agent claude-code # Cursor npx -y skills add vercel/next.js --skill update-docs --agent cursor # Codex npx -y skills add vercel/next.js --skill update-docs --agent codex # Gemini CLI npx -y skills add vercel/next.js --skill update-docs --agent gemini # Windsurf npx -y skills add vercel/next.js --skill update-docs --agent windsurf # Cline npx -y skills add vercel/next.js --skill update-docs --agent cline ``` ## Qué hace - Da un flujo guiado para actualizar la documentación de Next.js a partir de cambios de código - Analiza qué cambió en el código y qué documentación queda afectada - Actualiza la documentación existente o genera el esqueleto de una funcionalidad nueva - Aplica las convenciones de documentación y una lista de validación ## Cuándo usarla - Se pide actualizar la documentación de unos cambios o revisar qué documentación falta - Se pide sincronizar la documentación con el código o documentar una funcionalidad - Se mencionan `docs/`, `docs/01-app`, `docs/02-pages`, MDX o archivos `.mdx` ## Qué la activa - "¿Qué documentación afecta este PR?" - "Actualiza la documentación de este cambio" - "Genera el esqueleto de documentación de esta funcionalidad" ## Antes de instalar - Necesita en el PATH: git, pnpm ## Archivos - SKILL.md — 7 KB - references/CODE-TO-DOCS-MAPPING.md — 8 KB - references/DOC-CONVENTIONS.md — 6 KB ## SKILL.md Reproducido tal cual desde vercel/next.js bajo MIT. Esta sección es el documento original y está en inglés. # Next.js Documentation Updater Guides you through updating Next.js documentation based on code changes on the active branch. Designed for maintainers reviewing PRs for documentation completeness. ## Quick Start 1. **Analyze changes**: Run `git diff canary...HEAD --stat` to see what files changed 2. **Identify affected docs**: Map changed source files to documentation paths 3. **Review each doc**: Walk through updates with user confirmation 4. **Validate**: Run `pnpm lint` to check formatting 5. **Commit**: Stage documentation changes ## Workflow: Analyze Code Changes ### Step 1: Get the diff ```bash # See all changed files on this branch git diff canary...HEAD --stat # See changes in specific areas git diff canary...HEAD -- packages/next/src/ ``` ### Step 2: Identify documentation-relevant changes Look for changes in these areas: | Source Path | Likely Doc Impact | | -------------------------------------- | --------------------------- | | `packages/next/src/client/components/` | Component API reference | | `packages/next/src/server/` | Function API reference | | `packages/next/src/shared/lib/` | Varies by export | | `packages/next/src/build/` | Configuration or build docs | | `packages/next/src/lib/` | Various features | ### Step 3: Map to documentation files Use the code-to-docs mapping in `references/CODE-TO-DOCS-MAPPING.md` to find corresponding documentation files. Example mappings: - `src/client/components/image.tsx` → `docs/01-app/03-api-reference/02-components/image.mdx` - `src/server/config-shared.ts` → `docs/01-app/03-api-reference/05-config/` ## Workflow: Update Existing Documentation ### Step 1: Read the current documentation Before making changes, read the existing doc to understand: - Current structure and sections - Frontmatter fields in use - Whether it uses `` / `` for router-specific content ### Step 2: Identify what needs updating Common updates include: - **New props/options**: Add to the props table and create a section explaining usage - **Changed behavior**: Update descriptions and examples - **Deprecated features**: Add deprecation notices and migration guidance - **New examples**: Add code blocks following conventions ### Step 3: Apply updates with confirmation For each change: 1. Show the user what you plan to change 2. Wait for confirmation before editing 3. Apply the edit 4. Move to the next change ### Step 4: Check for shared content If the doc uses the `source` field pattern (common for Pages Router docs), the source file is the one to edit. Example: ```yaml # docs/02-pages/... file with shared content --- source: app/building-your-application/optimizing/images --- ``` Edit the App Router source, not the Pages Router file. ### Step 5: Validate changes ```bash pnpm lint # Check formatting pnpm prettier-fix # Auto-fix formatting issues ``` ## Workflow: Scaffold New Feature Documentation Use this when adding documentation for entirely new features. ### Step 1: Determine the doc type | Feature Type | Doc Location | Template | | ------------------- | --------------------------------------------------- | ---------------- | | New component | `docs/01-app/03-api-reference/02-components/` | API Reference | | New function | `docs/01-app/03-api-reference/04-functions/` | API Reference | | New config option | `docs/01-app/03-api-reference/05-config/` | Config Reference | | New concept/guide | `docs/01-app/02-guides/` | Guide | | New file convention | `docs/01-app/03-api-reference/03-file-conventions/` | File Convention | ### Step 2: Create the file with proper naming - Use kebab-case: `my-new-feature.mdx` - Add numeric prefix if ordering matters: `05-my-new-feature.mdx` - Place in the correct directory based on feature type ### Step 3: Use the appropriate template **API Reference Template:** ```mdx --- title: Feature Name description: Brief description of what this feature does. --- {/* The content of this doc is shared between the app and pages router. You can use the `Content` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */} Brief introduction to the feature. ## Reference ### Props
| Prop | Example | Type | Status | | ----------------------- | ------------------ | ------ | -------- | | [`propName`](#propname) | `propName="value"` | String | Required |
#### `propName` Description of the prop. \`\`\`tsx filename="app/example.tsx" switcher // TypeScript example \`\`\` \`\`\`jsx filename="app/example.js" switcher // JavaScript example \`\`\` ``` **Guide Template:** ```mdx --- title: How to do X in Next.js nav_title: X description: Learn how to implement X in your Next.js application. --- Introduction explaining why this guide is useful. ## Prerequisites What the reader needs to know before starting. ## Step 1: First Step Explanation and code example. \`\`\`tsx filename="app/example.tsx" switcher // Code example \`\`\` ## Step 2: Second Step Continue with more steps... ## Next Steps Related topics to explore. ``` ### Step 4: Add related links Update frontmatter with related documentation: ```yaml related: title: Next Steps description: Learn more about related features. links: - app/api-reference/functions/related-function - app/guides/related-guide ``` ## Documentation Conventions See `references/DOC-CONVENTIONS.md` for complete formatting rules. ### Quick Reference **Frontmatter (required):** ```yaml --- title: Page Title (2-3 words) description: One or two sentences describing the page. --- ``` **Code blocks:** ``` \`\`\`tsx filename="app/page.tsx" switcher // TypeScript first \`\`\` \`\`\`jsx filename="app/page.js" switcher // JavaScript second \`\`\` ``` **Router-specific content:** ```mdx Content only for App Router docs. Content only for Pages Router docs. ``` **Notes:** ```mdx > **Good to know**: Single line note. > **Good to know**: > > - Multi-line note point 1 > - Multi-line note point 2 ``` ## Validation Checklist Before committing documentation changes: - [ ] Frontmatter has `title` and `description` - [ ] Code blocks have `filename` attribute - [ ] TypeScript examples use `switcher` with JS variant - [ ] Props tables are properly formatted - [ ] Related links point to valid paths - [ ] `pnpm lint` passes - [ ] Changes render correctly (if preview available) ## References - `references/DOC-CONVENTIONS.md` - Complete frontmatter and formatting rules - `references/CODE-TO-DOCS-MAPPING.md` - Source code to documentation mapping ## Dónde encaja - Categoría: [Documentos](https://skillsagentes.com/categorias/documentos.md) — Lee, escribe y transforma archivos PDF, DOCX, XLSX y PPTX. - Creador: [vercel](https://skillsagentes.com/creators/vercel.md) — 36 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Next Cache Components Adoption](https://skillsagentes.com/skills/vercel/next.js/next-cache-components-adoption.md): Activa Cache Components en una app de Next.js y resuelve las rutas bloqueantes que aparecen. Úsalo para adoptar o migrar, activar el flag cacheComponents o decidir entre excluir rutas y arreglarlas. - [Next Cache Components Optimizer](https://skillsagentes.com/skills/vercel/next.js/next-cache-components-optimizer.md): Lleva una ruta de Next.js a navegación instantánea bajo Cache Components o PPR mediante un bucle agéntico: codifica el objetivo como un e2e instant() en rojo y lo trabaja hasta verde, ruta a ruta. - [Next Partial Prefetching Adoption](https://skillsagentes.com/skills/vercel/next.js/next-partial-prefetching-adoption.md): Activa Partial Prefetching en una app de Next.js y resuelve las insights que surgen: audita los Link con prefetch, activa partialPrefetching y opta por rutas con prefetch = 'partial'. - [Next Dev Loop](https://skillsagentes.com/skills/vercel/next.js/next-dev-loop.md): Verifica el comportamiento en runtime de Next.js tras editar código de la aplicación. Combina /_next/mcp, la visión de Next.js, con agent-browser, la del navegador. Requiere un next dev en marcha. - [Gh Stack](https://skillsagentes.com/skills/vercel/next.js/gh-stack.md): Gestiona PRs apilados y parte el trabajo en ramas revisables con gh-stack: creación, visualización, edición, push, envío, sincronización, rebase, merge y checkout. ## Skills relacionadas - [Write Api Reference](https://skillsagentes.com/skills/vercel/next.js/write-api-reference.md): Produce documentación de referencia de API de Next.js — funciones, componentes, convenciones de archivo, directivas y opciones de configuración — como página .mdx con frontmatter, ejemplos y reglas. - [Write Guide](https://skillsagentes.com/skills/vercel/next.js/write-guide.md): Genera guías técnicas que enseñan casos de uso reales con ejemplos progresivos: markdown con frontmatter YAML, introducción, de dos a cuatro pasos y una sección de siguientes pasos. - [Authoring Skills](https://skillsagentes.com/skills/vercel/next.js/authoring-skills.md): Cómo crear y mantener skills de agente en .agents/skills/. Úsalo al crear un SKILL.md, escribir descripciones, elegir campos de frontmatter o decidir qué va en un skill y qué en AGENTS.md. - [Backport Pr](https://skillsagentes.com/skills/vercel/next.js/backport-pr.md): Lleva un pull request fusionado de Next.js desde canary a una rama de release anterior como next-16-2: localiza el commit, crea la rama, hace cherry-pick, valida y abre el PR. - [Create Pr](https://skillsagentes.com/skills/vercel/next.js/create-pr.md): Crea ramas, commits, pushes y pull requests de GitHub para Next.js. Cubre la plantilla de PR, el formato de --body, las ramas codex/ y las directivas de git de la app Codex. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)