Skills
.Work. You
Rest

building-with-nextjs

Community

Master Next.js App Router patterns.

Software Engineering#react#data fetching#nextjs#server components#app router#client components
Authoralexejluft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the common issue of AI agents generating outdated Next.js Pages Router code (like getServerSideProps) that fails in the modern App Router, ensuring correct data fetching and component usage.

Core Features & Use Cases

  • App Router Data Fetching: Demonstrates correct patterns for Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), and on-demand revalidation.
  • Dynamic Routes & Params: Explains how to handle params and searchParams as Promises in Next.js 15+.
  • Server vs. Client Components: Guides on correctly isolating client-side interactivity.
  • Metadata Generation: Shows how to implement dynamic SEO metadata.
  • Use Case: When building a new Next.js application using the App Router, use this Skill to ensure your data fetching, routing, and component architecture adhere to the latest best practices, avoiding common pitfalls.

Quick Start

Use the building-with-nextjs skill to generate an async Server Component that fetches data using cache: 'no-store'.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: building-with-nextjs
Download link: https://github.com/alexejluft/brudi/archive/main.zip#building-with-nextjs

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.