nextjs

Structure Next.js apps with app router, server/client components, and API routes.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/desdat1/xopweb --skill nextjs-desdat1
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/desdat1/xopweb/tree/main/.claude/skills/nextjs
Command: npx skills add https://github.com/desdat1/xopweb --skill nextjs-desdat1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps developers organize Next.js apps by providing app router patterns, server/client component usage, and API route integration.

Core Features & Use Cases

  • Server Components for layouts and metadata, with Client Components for interactivity.
  • API route patterns for form handling and data fetching.
  • Dynamic routing and content-driven pages with real-world examples like marketing sites and dashboards.

Quick Start

Install Next.js 15, scaffold an app using app router, create a server layout, add a client page with 'use client', implement a sample API route, and wire dynamic routes.

Frequently Asked Questions about nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Next.js app with app router patterns and server components?

Structure a Next.js app by using server components for layouts and metadata, adding 'use client' for interactivity, and integrating API routes for form handling and data fetching.

When should I use server components versus client components in Next.js?

Use server components for layouts and metadata, and client components marked with 'use client' for user interactivity, ensuring optimal data fetching and responsive UI state.

How do I create dynamic routing for content-driven pages in Next.js?

Implement dynamic routing by defining route patterns in the app router to support content-driven pages like marketing sites and dashboards, mapping URL segments to components.

What's the best way to handle forms and data fetching with Next.js API routes?

Handle forms by implementing API route patterns for data submission and fetching, integrating these endpoints with your app router structure to process requests and return data.

Do I need to know React basics to build Next.js dashboards and marketing sites?

Yes, building dashboards and marketing sites requires Next.js basics and documented patterns for server components, assuming foundational React knowledge to implement app router structures.

How do I configure metadata for layouts in a Next.js application?

Configure metadata by defining it within server components used for layouts, managing SEO and page information directly within the app router structure.