multiAI Summary Pending

next-js-patterns

Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

231 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/next-js-patterns/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/abdulsamad94/next-js-patterns/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/next-js-patterns/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How next-js-patterns Compares

Feature / Agent	next-js-patterns	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Next.js Patterns

## App Router
We use the Next.js 15 App Router located in `app/`.

### Pages
- **Location**: `app/[route]/page.tsx`
- **Component**: Default export function.
- **Client vs Server**: Use `"use client"` directive at the top for components requiring state (`useState`, `useEffect`) or browser APIs. otherwise default to Server Components.

### Layouts
- **Location**: `app/layout.tsx` (Root), `app/[route]/layout.tsx` (Nested).
- **Purpose**: Wrappers for pages, holding navigation, fonts, and metadata.

## Navigation
- Use `Link` from `next/link` for internal navigation.
- Use `useRouter` from `next/navigation` for programmatic navigation (inside Client Components).

```tsx
import Link from "next/link";
import { useRouter } from "next/navigation";

// Link
<Link href="/dashboard">Dashboard</Link>

// Router
const router = useRouter();
router.push('/login');
```

## Data Fetching
- **Server Components**: Fetch directly using `await fetch()` or DB calls.
- **Client Components**: Use `useEffect` or SWR/TanStack Query (if added later). Currently using standard `fetch` in `useEffect`.

## Font Optimization
- We use `next/font/google` (e.g., Poppins) in `app/layout.tsx`.
- Variable fonts are passed to `body` className.

## Metadata
- Define `export const metadata: Metadata = { ... }` in `page.tsx` or `layout.tsx` for SEO.