<!-- # COPYRIGHT NOTICE # This file is part of the "Universal Biomedical 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 -->