skills.rest
dgkngk
dgkngkCOMMUNITY
Explore all skills by this author →
GitHub

nextjs

Guide Next.js App Router architecture, Server Components, and data fetching patterns.

Updated Feb 26, 2026
Search Tags:#react#data fetching#nextjs#seo#server components#app router
One-click install
npx skills add https://github.com/dgkngk/super-kit --skill nextjs-dgkngk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/dgkngk/super-kit/tree/main/skills/meta/nextjs
Command: npx skills add https://github.com/dgkngk/super-kit --skill nextjs-dgkngk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build modern Next.js applications by providing guidance on the App Router architecture, Server Components, and efficient data fetching strategies.

Core Features & Use Cases

  • App Router Structure: Understand the file-based routing and layout conventions.
  • Server/Client Components: Learn when and how to use Server and Client Components for optimal performance.
  • Data Fetching: Implement efficient data fetching with fetch and Server Actions.
  • SEO: Configure metadata for improved search engine visibility.
  • Use Case: When starting a new Next.js project or refactoring an existing one to use the App Router, consult this Skill for best practices on component architecture and data handling.

Quick Start

Use the nextjs skill to explain how to fetch data in a Server Component.

Frequently Asked Questions about nextjs

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

FAQPage Schema
How do I fetch data in Next.js Server Components using the App Router?▼

Next.js Server Components fetch data directly using the extended fetch API, allowing you to request and cache data on the server before rendering the UI.

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

Use Server Components for data fetching and static rendering to optimize performance, and switch to Client Components only when you need interactivity or browser APIs.

What is the best way to structure file-based routing and layouts in a Next.js App Router project?▼

Structure Next.js App Router routing by using file-based conventions to define layouts and pages, which automatically generate the nested UI hierarchy for your application.

How do I configure SEO metadata to improve search engine visibility in Next.js?▼

Configure SEO in Next.js by defining metadata objects within your App Router files, allowing the framework to automatically inject relevant tags for improved search engine visibility.

Can I use Server Actions for data fetching and mutations instead of traditional API routes in Next.js?▼

Yes, Server Actions in Next.js allow you to write server-side data mutations and fetch logic directly within components, eliminating the need to build separate API endpoints.

Does Next.js App Router support automatic request memoization for duplicate fetch calls?▼

Next.js automatically memoizes identical fetch requests during a single render pass, deduplicating duplicate calls to optimize data fetching efficiency within Server Components.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
reomgitreomgit

setup-deploy

Detect deployment platforms and write configuration settings to CLAUDE.md.

Community
Advanced
CloakingGhostCloakingGhost

frontend

Guide Next.js 16 frontend development with FSD architecture, TypeScript, Tailwind CSS, and Zustand.

Community
Intermediate
nathanielcrowell12-specnathanielcrowell12-spec

nextjs

Implement Next.js 15 server components, client components, server actions, and API routes.

Community
Intermediate