nextjs-best-practices

Guide Next.js App Router development with component and data fetching best practices.

1|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/andymsun/lawvics --skill nextjs-best-practices-andymsun
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/andymsun/lawvics/tree/main/.cursor/skills/nextjs-best-practices
Command: npx skills add https://github.com/andymsun/lawvics --skill nextjs-best-practices-andymsun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear, actionable guidelines and best practices for developing efficient and maintainable applications using the Next.js App Router.

Core Features & Use Cases

  • Component Strategy: Understand when to use Server vs. Client Components.
  • Data Fetching: Learn optimal patterns for fetching data with caching and revalidation.
  • Routing: Grasp file conventions and advanced routing techniques.
  • Performance: Implement image optimization and bundle splitting.
  • Use Case: Ensure your Next.js project follows modern standards for performance, SEO, and developer experience by reviewing these principles.

Quick Start

Review the decision tree for Server vs Client Components in Next.js.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
How do I know when to use Server vs Client Components in Next.js App Router?

To determine Server vs Client Components in Next.js App Router, review the component strategy decision tree to balance server-side rendering benefits with client-side interactivity needs. This ensures optimal performance and maintainability for your React application.

What are the best practices for data fetching and caching in Next.js?

Best practices for data fetching in Next.js involve implementing optimal patterns for caching and revalidation. By leveraging these techniques, you ensure efficient data retrieval and maintain up-to-date content without compromising application performance.

How do I optimize performance and bundle splitting in a Next.js application?

To optimize performance in a Next.js application, implement image optimization and bundle splitting techniques. These strategies reduce load times and improve the overall developer experience by ensuring modern React standards are met.

How does file convention routing work in the Next.js App Router?

Next.js App Router routing relies on specific file conventions to define navigation and advanced routing techniques. Grasping these principles allows you to structure your application efficiently and handle complex routing scenarios.

Can I use Server Actions and API routes together in Next.js?

Yes, you can use Server Actions and API routes together in Next.js to handle data mutations and backend logic. Following established best practices ensures seamless integration and robust API endpoint management.

Why is metadata handling important for SEO in Next.js App Router?

Metadata handling is important for SEO in Next.js App Router because it dynamically manages head tags to improve search visibility. Proper metadata implementation ensures your web application meets modern SEO standards and performance benchmarks.