Agent skill · software engineering · aiskillstore
next-js-patterns
Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.
Why this skill is useful
Provides specific patterns and best practices for Next.js App Router and Server Actions that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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). 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/next-js-patterns