nextjs

Provide guardrails and best practices for Next.js 14+ App Router development.

7|1|Updated Nov 3, 2025
One-click install
npx skills add https://github.com/ar4mirez/samuel --skill nextjs-ar4mirez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/ar4mirez/samuel/tree/main/template/.claude/skills/nextjs
Command: npx skills add https://github.com/ar4mirez/samuel --skill nextjs-ar4mirez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guardrails, patterns, and best practices for developing modern Next.js applications, ensuring efficient and robust development.

Core Features & Use Cases

  • App Router Guidance: Covers routing, layouts, server/client components, and data fetching patterns.
  • Server Actions & API Routes: Demonstrates secure and efficient data mutations and API endpoint creation.
  • Performance & Optimization: Includes strategies for image, font, and script optimization, plus caching and deployment.
  • Use Case: When starting a new Next.js project or refactoring an existing one, use this Skill to ensure adherence to the latest best practices for performance, security, and maintainability.

Quick Start

Use the nextjs skill to generate a new Next.js page component for a dashboard route.

Frequently Asked Questions about nextjs

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

FAQPage Schema
What are the best practices for Next.js App Router server and client components?

Next.js App Router best practices involve using server components for data fetching and client components for interactivity. This Skill provides guardrails and patterns to ensure efficient, secure full-stack development with proper component boundaries.

How do I implement Server Actions and API routes in Next.js 14?

Implement Server Actions and API routes in Next.js 14 by following secure data mutation patterns. This Skill demonstrates endpoint creation and mutation guardrails to ensure robust full-stack TypeScript web applications.

Does this Next.js guidance cover performance optimization and deployment?

Yes, Next.js guidance covers performance optimization and deployment. It includes strategies for image, font, and script optimization, alongside caching patterns and deployment configurations for modern web applications.

Can I use TypeScript with Next.js App Router middleware and error handling?

Yes, you can use TypeScript with Next.js App Router middleware and error handling. This Skill provides patterns for configuring middleware and managing errors in full-stack TypeScript web applications.

What is the recommended way to structure data fetching in Next.js 14?

The recommended way to structure data fetching in Next.js 14 is within server components. This Skill provides guardrails for data fetching patterns to ensure performance and maintainability in your web application.