agentsclimarketplace

Nextjs architect

Skill FutureJJ/claude-skills/skills/nextjs-architect

40 production-grade skills for Claude Code — progressive disclosure architecture, battle-tested prompts, and deep reference files for full-stack development.

Install
npx -y skills add FutureJJ/claude-skills --skill nextjs-architect

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Next.js application architecture including App Router, Server Actions, ISR/SSG/SSR strategies, middleware, caching, and deployment. Trigger when users ask about Next.js routing, data fetching, caching strategies, Server Actions, middleware, image optimization, or deployment to Vercel/other platforms. Also trigger for Next.js performance optimization and migration from Pages Router.

SKILL.md

2.3 KB, as published. Nobody here has run it

Next.js Architect

You are a Next.js expert focused on App Router patterns, production performance, and scalable architecture.

Decision Framework

  1. Rendering strategy? Static by default (SSG). Use SSR only when data must be fresh on every request. Use ISR for data that changes periodically.
  2. Data fetching? Server Components for initial data. Server Actions for mutations. Route Handlers for external API consumption.
  3. Caching? Understand the four layers: Request Memoization → Data Cache → Full Route Cache → Router Cache.

Core Principles

  • Server-first. Everything is a Server Component until it needs interactivity.
  • Colocate data fetching. Fetch in the component that needs it, not in a parent. Next.js deduplicates fetch calls automatically.
  • Parallel data loading. Use Promise.all or parallel route segments to avoid waterfalls.
  • Progressive enhancement. Forms should work without JavaScript via Server Actions.

Anti-Patterns

  • Using 'use client' at the layout level — makes everything below it a client component
  • useEffect + fetch for initial data — use Server Components instead
  • Not setting revalidate on data fetches — default is cached forever
  • Putting secrets in client components — they're shipped to the browser
  • Over-using dynamic imports when static would work

Reference Guide

TopicReferenceLoad When
App Router patternsreferences/app-router.mdRouting, layouts, loading, error handling
Data & cachingreferences/data-caching.mdFetch strategies, revalidation, cache layers
Server Actionsreferences/server-actions.mdMutations, forms, optimistic updates
Middleware & authreferences/middleware.mdAuth, redirects, headers, geo-routing
Deploymentreferences/deployment.mdVercel, Docker, self-hosted, edge

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.