Resolve Next.js App Router routing and rendering issues.
npx skills add https://github.com/arthtyagi/onloop --skill nextjs-arthtyagi
Please help me install this Agent Skill. Skill: nextjs Source: https://github.com/arthtyagi/onloop/tree/main/.agents/skills/nextjs Command: npx skills add https://github.com/arthtyagi/onloop --skill nextjs-arthtyagi
This Skill helps you build, debug, and refactor modern Next.js App Router applications without guessing the right routing, rendering, or data-fetching pattern.
It covers App Router file conventions, Server and Client Components, Server Actions, metadata, route handlers, middleware or proxy logic, caching, bundling, image and font optimization, and Vercel deployment guidance. Use it when you need to choose the correct component boundary, migrate legacy Pages Router code, diagnose async request API issues, or structure durable server-side workflows. It is especially useful for production Next.js apps that mix dynamic routes, webhooks, static generation, and performance-sensitive rendering behavior.
Use the nextjs skill to review this Next.js file or route and tell me the correct App Router fix, including component boundary, caching, metadata, or routing guidance.
High-intent search queries and answers about installing and using this skill.
Fix Next.js App Router routing and rendering issues by reviewing file conventions, choosing correct component boundaries, and applying async params and headers handling to ensure proper Server Component serialization and server-friendly bundling.
You need Server Components for server-side data fetching and rendering, and Client Components for interactive UI. Choosing the correct component boundary resolves React Server Component serialization rules and optimizes rendering behavior in modern Next.js apps.
Migrate legacy Next.js Pages Router code to App Router by restructuring routes to use new file conventions, updating data fetching to async request APIs, and converting page logic to Server Components or Server Actions for durable server-side workflows.
Handle async params and headers in Next.js Server Actions by awaiting dynamic request APIs within your route handlers or Server Components, ensuring proper server-friendly runtime choices and RSC serialization rules are met.
Yes, this Next.js skill works with Vercel deployment and caching tasks. It applies server-friendly bundling, proxy logic, and middleware configuration guidance to optimize performance-sensitive rendering behavior for production Next.js apps.
Next.js dynamic routes fail to generate metadata correctly when async params are not properly awaited or when metadata API conventions are misapplied. Apply correct App Router file conventions and async request handling to resolve serialization issues.
EzequielpereyraaStandardize Next.js App Router project structure with TypeScript strict and Tailwind.
gil00pitaDeploy Next.js applications to Vercel production and preview environments.
atro2829-hubBuild fullstack Next.js 16 apps with TypeScript, Tailwind CSS 4, shadcn/ui, and Prisma ORM.
villa1Design Next.js 16 App Router architectures with server components and caching.
