Modern Best Practice Nextjs

What it does

This skill guides AI agents in utilizing modern best practices when developing frontend user interfaces with Next.js, specifically focusing on the App Router. It emphasizes efficient routing and structure, data fetching techniques, UI state management, and metadata handling for improved SEO. The skill encourages leveraging web search or documentation resources to stay current with Next.js's evolving features.

When to use it

• When starting a new Next.js project and needing guidance on structuring the application using the App Router.
• When refactoring existing code to align with modern Next.js best practices, particularly regarding data fetching.
• To ensure proper implementation of UI loading states and error handling within routes.
• For optimizing metadata and SEO performance in a Next.js application.

Key capabilities

• App Router Guidance: Promotes the use of the App Router for new development work.
• Routing & Structure: Recommends nested layouts and route groups for organization.
• Data Fetching Best Practices: Encourages fetching data within React Server Components, avoiding useEffect() and direct fetch().
• Server Actions: Suggests using server actions ("Server Functions") for mutations.
• Metadata API Utilization: Advises leveraging the Metadata API for SEO optimization.

Example prompts

• "How should I structure my Next.js project using the App Router?"
• "What's the best way to fetch data in a Next.js Server Component?"
• "Can you show me how to implement loading states and error handling in a Next.js route?"

Tips & gotchas

• Next.js evolves rapidly, so always consult current documentation or use web search for the latest information.
• Prioritize server components; only add 'use client' when absolutely necessary.
• Keep dynamic metadata to a minimum for optimal SEO performance.