القائمة
Upgrade Next.js to the latest version following official migration guides and codemods
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Create domain components following bendd.me's directory structure, barrel export pattern, and validation conventions. Use when adding new React components, creating Zustand stores, setting up hooks, or organizing component files. Triggers on: new component, create component, add hook, Zustand store, barrel export, index.ts, domain folder. NOT for React composition patterns like compound components or render props (use vercel-composition-patterns). NOT for MDX components (use mdx-authoring).
Work with bendd.me's content pipeline — MDXProcessor queries, content directory management, article listing, and static generation. Use when querying articles, filtering content, working with generateStaticParams, modifying route handlers, or understanding the content-to-page pipeline. Triggers on: MDXProcessor, getArticles, formatForDisplay, sortByDateDesc, filterByCategory, generateStaticParams, article route, craft route, content pipeline, static generation. NOT for writing MDX content (use mdx-authoring).
Write, validate, and register MDX components and content for bendd.me blog. Use when creating or editing .mdx files, adding custom MDX components, modifying frontmatter, or working with the MDX rendering pipeline. Triggers on: MDX, frontmatter, article, craft, Callout, Steps, MagicMove, content creation, blog post, createMDXComponent, Zod schema validation. NOT for component directory structure (use component-creation).
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
| name | next-upgrade |
| description | Upgrade Next.js to the latest version following official migration guides and codemods |
| argument-hint | [target-version] |
Upgrade the current project to the latest Next.js version following official migration guides.
Detect current version: Read package.json to identify the current Next.js version and related dependencies (React, React DOM, etc.)
Fetch the latest upgrade guide: Use WebFetch to get the official upgrade documentation:
Determine upgrade path: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
Run codemods first: Next.js provides codemods to automate breaking changes:
npx @next/codemod@latest <transform> <path>
Common transforms:
next-async-request-api - Updates async Request APIs (v15)next-request-geo-ip - Migrates geo/ip properties (v15)next-dynamic-access-named-export - Transforms dynamic imports (v15)Update dependencies: Upgrade Next.js and peer dependencies together:
npm install next@latest react@latest react-dom@latest
Review breaking changes: Check the upgrade guide for manual changes needed:
next.config.jsUpdate TypeScript types (if applicable):
npm install @types/react@latest @types/react-dom@latest
Test the upgrade:
npm run build to check for build errorsnpm run dev and test key functionality