nextjs

Enforce Next.js 15 App Router conventions for routing, components, and data fetching.

1|Updated Mar 7, 2026

Search Tags:#typescript #react #data fetching #nextjs #server components #app router #client components

Ready to run

npx skills add https://github.com/george-popescu/bee-dev --skill nextjs-george-popescu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/george-popescu/bee-dev/tree/main/plugins/bee/skills/stacks/nextjs
Command: npx skills add https://github.com/george-popescu/bee-dev --skill nextjs-george-popescu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear, actionable guidance on adhering to Next.js 15 App Router conventions and best practices, ensuring efficient and maintainable application development.

Core Features & Use Cases

App Router Structure: Understand file-based routing, layout conventions, and dynamic segments.
Server vs. Client Components: Learn when and how to use Server and Client Components effectively.
Data Fetching: Implement Server Actions, Route Handlers, and direct data fetching in Server Components.
Caching & Revalidation: Master strategies for optimizing data freshness and performance.
Use Case: A developer starting a new Next.js project can use this Skill to quickly set up their project structure and understand the core principles of component rendering and data management.

Quick Start

Follow the Next.js 15 App Router conventions for structuring your project.

Frequently Asked Questions about nextjs

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

FAQPage Schema

How do I structure file-based routing and dynamic segments in the Next.js 15 App Router?▼

Next.js 15 App Router enforces specific file-based routing conventions, using dedicated layout files and dynamic segment parameters to structure your project hierarchy. You organize your application by creating route files that automatically map to your URL paths.

When should I use Server Components versus Client Components in Next.js?▼

Use Server Components by default for direct data fetching and static content, switching to Client Components only when requiring interactivity or browser APIs. This distinction ensures optimal rendering performance and adheres to React best practices.

What is the best way to fetch data using Server Actions and Route Handlers in Next.js?▼

Implement data fetching directly within Server Components for reads, use Server Actions for mutations, and configure Route Handlers for API endpoints. This strategy follows Next.js best practices for efficient data management and application performance.

How do caching and revalidation strategies work in Next.js 15?▼

Caching and revalidation mechanisms in Next.js 15 optimize data freshness and application performance. You configure these strategies to determine how fetched data is stored and when the server should revalidate the cached responses.

Does Next.js 15 middleware configuration support TypeScript and React best practices?▼

Next.js 15 middleware configuration fully supports TypeScript and integrates with React best practices. You configure middleware to intercept requests at the edge while maintaining type safety and following established App Router conventions.