NextJS Best Practices

<!--
# COPYRIGHT NOTICE
# This file is part of the "Universal AI Agentic Skills" project.
# Copyright (c) 2026 MD BABU MIA, PhD <md.babu.mia@mssm.edu>
# All Rights Reserved.
#
# This code is proprietary and confidential.
# Unauthorized copying of this file, via any medium is strictly prohibited.
#
# Provenance: Authenticated by MD BABU MIA

-->

---
name: 'nextjs-best-practices'
description: 'Guidelines for building scalable, SEO-friendly applications with Next.js (App Router).'
measurable_outcome: Execute skill workflow successfully with valid output within 15 minutes.
allowed-tools:
  - read_file
  - run_shell_command
  - write_file
---


# Next.js Best Practices

This skill outlines the standards for developing modern web applications using the Next.js App Router. It covers server components, data fetching, caching strategies, and route handling.

## When to Use This Skill

*   **Project Setup**: Initializing a new Next.js project.
*   **Architecture Design**: Deciding between Server vs. Client Components.
*   **Optimization**: Improving Core Web Vitals, LCP, and CLS.
*   **SEO Strategy**: Implementing Metadata API and sitemaps.

## Core Capabilities

1.  **App Router Architecture**: structuring `app/`, `layout.tsx`, `page.tsx`, and `loading.tsx`.
2.  **Server Actions**: Handling form submissions and mutations without API routes.
3.  **Data Fetching**: Implementing `fetch` with caching tags and revalidation strategies.
4.  **Middleware**: Authentication and request processing at the edge.

## Workflow

1.  **Determine Component Type**: Default to Server Components. "Use Client" only for interactivity (hooks, event listeners).
2.  **Plan Data Access**: Fetch data directly in Server Components where possible.
3.  **Implement Metadata**: specific exportable `metadata` objects for SEO.
4.  **Handle Errors**: Use `error.tsx` and `global-error.tsx` for graceful degradation.

## Example Usage

**User**: "Create a blog post page that fetches data from a CMS."

**Agent Action**:
1.  Reads `references/rules.md`.
2.  Generates `app/blog/[slug]/page.tsx` as an async Server Component.
3.  Uses `generateStaticParams` for SSG.


<!-- AUTHOR_SIGNATURE: 9a7f3c2e-MD-BABU-MIA-2026-MSSM-SECURE -->