Codex skills for Next.js
Next.js skills cover the App Router, caching, Server Actions, Pages Router migration, SEO metadata and Vercel deploys. Codex detects whether an app uses Cache Components or the older fetch cache before touching revalidation, writes every server action as authenticate, validate, authorize, mutate, and asks before any production deploy, promote or rollback on Vercel.
Start with these 3
- Next.js App Router Folders, boundaries and handlers that behave as expected Codex lays out app/ folders with the right file conventions and places loading.tsx and error.tsx where they actually catch the layout or page in question. It uses async params with generated PageProps types, builds intercepting-route modals that survive refresh, writes route handlers with auth inside, and checks the build's route table to confirm static or dynamic rendering per route.
- Next.js Caching Every cached value gets a lifetime, a tag and an owner Codex first runs a bundled inventory script to see whether the app uses Cache Components or the older fetch Data Cache, then maps each data source to a lifetime and tags. It migrates revalidate and dynamic exports to use cache, streams request-bound parts behind Suspense, chooses updateTag, revalidateTag with a profile, or revalidatePath per mutation, and verifies with build output and cache headers.
- Next.js Server Actions Treat every action as a public POST endpoint Codex writes every server action in a fixed order: authenticate, validate with a schema, authorize against the session's tenant, mutate, invalidate, then return or redirect. It wires results into useActionState, keeps forms working without JavaScript, sets body limits and allowed origins deliberately, and proves the action rejects forged payloads from another user.
17 more Next.js skills
-
Next.js SEO
Metadata, sitemaps and canonicals the App Router way -
Next.js Pages to App Migration
Move route by route and ship after each one -
React Server Components
Put the client boundary at the smallest leaf -
Vercel AI SDK
Streaming chat and tools that match your ai version -
Vercel Deployment
Previews, env scopes and one-command rollbacks -
Motion for React
Exit animations that actually play -
Frontend Error Handling
No white screens, no silent failures, no retry storms -
Auth Libraries
Pick the right auth stack, then wire it safely -
tRPC APIs
End-to-end types without leaking data or auth -
Supabase Backend
Migrations, RLS and auth checks that hold up -
Serverless Postgres
Pooled at runtime, direct for migrations, branched per PR -
Edge Functions
Run at the edge only what belongs there -
Content Security Policy
Strict CSP without breaking checkout -
PostHog Analytics
One person per user, flags without flicker -
Clerk Auth
Clerk sign-in with checks where the data lives -
Headless CMS
Typed content, instant publish, safe previews -
Sentry Integration
Readable stack traces from every production build
General skills with Next.js guidance
Not built around Next.js, but they include steps or tools for it. Not part of the install-all command.
-
CDN Caching
High hit ratios without leaking anyone's page -
SEO Migrations
Move the site, keep the rankings -
TanStack Query
Exact keys, deliberate staleTime, honest mutations -
Zustand State
Small stores, narrow selectors, versioned persistence -
SvelteKit
Server loads, real forms, the right adapter -
Astro Sites
Static by default, islands only where they earn it -
React Three Fiber
3D in React without re-rendering every frame -
Cron Scheduling
Scheduled jobs that run once, on time, visibly -
LLM Streaming
Tokens that arrive live and stop when asked -
Preview Environments
A live URL per PR, gone when the PR closes -
SST v3 Apps
TypeScript infrastructure with links, not hardcoded ARNs -
CSRF Protection
Forged requests die at the middleware
Every Next.js skill in one command
Installs these 20 into ~/.agents/skills/. Add --project after -- to install into the current repository instead.
The installer is a 104-line POSIX shell script. It fetches the skills you name from codexskills.dev and unpacks each into its own folder in your skills directory. No sudo, no telemetry, and every skill page shows the full SKILL.md first. Read install.sh
curl -fsSL codexskills.dev/install.sh | sh -s -- nextjs-app-router nextjs-caching nextjs-server-actions nextjs-seo nextjs-pages-to-app-migration react-server-components vercel-ai-sdk vercel-deployment motion-animations frontend-error-handling auth-libraries trpc-apis supabase-backend serverless-postgres edge-functions content-security-policy posthog-analytics clerk-auth headless-cms sentry-integration Next.js FAQ
Is there a Codex skill for Next.js 16 caching and use cache?
Next.js Caching runs a bundled inventory script to find out whether cacheComponents is on or the app still uses the fetch Data Cache and route segment configs. It maps each data source to a cacheLife and tags, migrates revalidate and dynamic exports to use cache, and picks updateTag, revalidateTag or revalidatePath per mutation. It covers both Next.js 15 and 16 and verifies with build output and cache headers.
Can Codex migrate a Next.js app from the Pages Router to the App Router?
Next.js Pages to App Migration inventories every pages/ file with a bundled script that scores effort and flags URLs defined in both routers, then moves routes lowest-effort first. It maps getStaticPaths, next/head and next/router to their app/ equivalents and checks status codes, metadata and rendering mode before deleting each old file. It also warns that code hooked into router.events stops firing on app/ routes.
How do these skills secure Next.js Server Actions?
Next.js Server Actions writes every action in a fixed order: authenticate, validate with a schema, authorize against the session's tenant, mutate, invalidate, then return or redirect. It does not rely on the page or middleware for permissions, because an action can be called directly with any arguments. It sets serverActions body limits and allowedOrigins deliberately and proves the action rejects forged payloads from another user.
How do I install all 20 Next.js skills at once?
Pass every name to the installer in one command: curl -fsSL https://codexskills.dev/install.sh | sh -s -- nextjs-app-router nextjs-caching nextjs-server-actions nextjs-seo nextjs-pages-to-app-migration react-server-components vercel-ai-sdk vercel-deployment motion-animations frontend-error-handling auth-libraries trpc-apis supabase-backend serverless-postgres edge-functions content-security-policy posthog-analytics clerk-auth headless-cms sentry-integration. Add --project right after -- to put them in the current repository's .agents/skills/ so your team gets them too.
Which Next.js skill should I try first?
Next.js App Router is the closest fit for most Next.js work. Mention it with $nextjs-app-router in a prompt to load it on purpose; after that, Codex picks it up on its own whenever a task matches.