skills.rest
HafizFasih
HafizFasihCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-expert

Enforce Next.js App Router conventions and server components by default.

2|1|Updated Jan 24, 2026
Search Tags:#typescript#routing#nextjs#seo#app-router#server-components
One-click install
npx skills add https://github.com/HafizFasih/AI-Mustaqbil-Hackathon --skill nextjs-expert-hafizfasih
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-expert
Source: https://github.com/HafizFasih/AI-Mustaqbil-Hackathon/tree/main/.claude/skills/nextjs-expert
Command: npx skills add https://github.com/HafizFasih/AI-Mustaqbil-Hackathon --skill nextjs-expert-hafizfasih

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers build fast Next.js applications by enforcing App Router conventions, Server Components by default, and SEO-friendly metadata practices.

Core Features & Use Cases

  • Enforced App Router patterns: Use the app/ directory structure and file-based routing to ensure scalable, maintainable apps.
  • Server Components by default: Minimize client-side JavaScript by rendering on the server and opting into client components only when necessary.
  • SEO and metadata discipline: Generate server-side metadata for improved search visibility and social sharing.
  • Type-safe development: Strong TypeScript typings for params, searchParams, and props across routes.
  • Use cases: Ideal for marketing sites, dashboards, documentation, or storefronts that demand fast initial loads and robust SEO.

Quick Start

Create a new Next.js 14+ app using the App Router, add a sample route that uses server-side data fetching, and implement a small client component for interactive UI.

Frequently Asked Questions about nextjs-expert

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

FAQPage Schema
How do I structure Next.js App Router routes for server components by default?▼

Structure Next.js App Router routes using the app/ directory and file-based routing to render server components by default, opting into client components only when interactive UI is required.

How do I generate SEO metadata for Next.js App Router routes?▼

Generate SEO metadata for Next.js App Router routes by returning metadata objects from your server components, ensuring server-side generation for improved search visibility and social sharing.

What is the best way to separate server and client components in Next.js?▼

The best way to separate Next.js components is enforcing server components by default and explicitly marking interactive client components, minimizing client-side JavaScript for fast initial loads.

How do I use TypeScript for type-safe params and searchParams in Next.js?▼

Use TypeScript to apply strong typings for params, searchParams, and props across Next.js routes, ensuring type-safe routing and clear data fetching boundaries in your application.

Can I use this approach to build scalable storefronts and dashboards?▼

Yes, this server-first Next.js approach is ideal for building scalable marketing sites, dashboards, documentation, or storefronts that demand fast initial loads and robust SEO.

Related Skills

Explore More Software Engineering Skills→
LeoTechProLeoTechPro
1

nextjs-development

Develops Next.js 14+ apps using App Router, Server Components, Actions, SSR, and Tailwind CSS.

Community
Advanced
yeohj0710yeohj0710

vercel-deploy

Deploy applications to Vercel and return preview and claim URLs.

Community
Advanced
JosiahSiegelJosiahSiegel
51

tailwindcss-advanced-components

Build dynamic Tailwind CSS components with CVA variants and slot patterns.

Community
Advanced
mgd34msumgd34msu
4

solidstart

Develop full-stack SolidStart applications with SSR, SSG, and server functions.

Community
Advanced