Next Js Patterns

Name: Next Js Patterns
Author: aiskillstore

aiskillstore/marketplace

2 installs
404 repo stars
Updated August 5, 2026
aiskillstore/marketplace

next-js-patterns is a Claude Code skill that documents Next.js 15 App Router conventions for pages, layouts, navigation, data fetching, fonts, and metadata.

About

next-js-patterns is a Claude Code skill documenting Next.js 15 App Router conventions and patterns. It covers page and layout locations, the client-versus-server component boundary, navigation with next/link and useRouter, data fetching in server and client components, next/font optimization, and metadata for SEO. A developer uses it to keep an agent aligned with a project's Next.js conventions while building UI.

Documents Next.js 15 App Router conventions: pages, layouts, client vs server components
Covers navigation with next/link and useRouter, data fetching, fonts, and metadata
A lightweight project-convention reference, not a scaffolder

Next Js Patterns by the numbers

2 all-time installs (skills.sh)
Ranked #1,863 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

At a glance

next-js-patterns capabilities & compatibility

Capabilities: frontend · app router setup · convention reference
Use cases: frontend
IDEs: vscode · cursor ide
Pricing: Free

From the docs

What next-js-patterns says it does

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

SKILL.md

Use `"use client"` directive at the top for components requiring state (`useState`, `useEffect`) or browser APIs. otherwise default to Server Components.

SKILL.md

npx skills add https://github.com/aiskillstore/marketplace --skill next-js-patterns

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/aiskillstore/marketplace/next-js-patterns.svg)](https://skillselion.com/skills/aiskillstore/marketplace/next-js-patterns)

Installs	2
repo stars	★ 404
Last updated	August 5, 2026
Repository	aiskillstore/marketplace ↗

What it does

Follow Next.js 15 App Router conventions for pages, layouts, navigation, data fetching, and metadata.

Who is it for?

Developers who want an agent to follow consistent Next.js 15 App Router conventions

Skip if: Pages Router projects or non-Next.js React work

When should I use this skill?

writing Next.js App Router pages, layouts, navigation, or metadata

What you get

New Next.js pages and components follow the project's App Router conventions for components, navigation, and metadata.

By the numbers

6 pattern sections (App Router, Navigation, Data Fetching, Fonts, Metadata)

Files

SKILL.mdMarkdownGitHub ↗

Next.js Patterns

App Router

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

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).

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.

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-16T16:49:21.834Z",
    "slug": "abdulsamad94-next-js-patterns",
    "source_url": "https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/nextjs",
    "source_ref": "master",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "cf2a90f1ce988197358706dc9f46c5bd8b6d80ab10d88abfe0c1d5748d8e509e",
    "tree_hash": "b9f76cce28031855693d6205aba98eaee7053d5e400dde75601f80fbc5e2ded8"
  },
  "skill": {
    "name": "next-js-patterns",
    "description": "Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.",
    "summary": "Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.",
    "icon": "🟢",
    "version": "1.0.0",
    "author": "AbdulSamad94",
    "license": "MIT",
    "category": "coding",
    "tags": [
      "nextjs",
      "react",
      "app-router",
      "server-actions"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "network",
      "filesystem",
      "external_commands"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "Pure documentation skill containing markdown documentation for Next.js patterns. No executable code, network calls, or file system access. The static analyzer flagged JSON string patterns as cryptographic/network threats, but these are metadata fields in a configuration file. This skill only provides guidance documentation.",
    "risk_factor_evidence": [
      {
        "factor": "network",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          },
          {
            "file": "SKILL.md",
            "line_start": 37,
            "line_end": 37
          }
        ]
      },
      {
        "factor": "filesystem",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 9,
            "line_end": 9
          },
          {
            "file": "SKILL.md",
            "line_start": 12,
            "line_end": 12
          },
          {
            "file": "SKILL.md",
            "line_start": 14,
            "line_end": 14
          },
          {
            "file": "SKILL.md",
            "line_start": 14,
            "line_end": 14
          },
          {
            "file": "SKILL.md",
            "line_start": 14,
            "line_end": 14
          },
          {
            "file": "SKILL.md",
            "line_start": 17,
            "line_end": 17
          },
          {
            "file": "SKILL.md",
            "line_start": 17,
            "line_end": 17
          },
          {
            "file": "SKILL.md",
            "line_start": 21,
            "line_end": 21
          },
          {
            "file": "SKILL.md",
            "line_start": 21,
            "line_end": 21
          },
          {
            "file": "SKILL.md",
            "line_start": 22,
            "line_end": 22
          },
          {
            "file": "SKILL.md",
            "line_start": 22,
            "line_end": 22
          },
          {
            "file": "SKILL.md",
            "line_start": 24,
            "line_end": 34
          },
          {
            "file": "SKILL.md",
            "line_start": 34,
            "line_end": 37
          },
          {
            "file": "SKILL.md",
            "line_start": 37,
            "line_end": 38
          },
          {
            "file": "SKILL.md",
            "line_start": 38,
            "line_end": 38
          },
          {
            "file": "SKILL.md",
            "line_start": 38,
            "line_end": 38
          },
          {
            "file": "SKILL.md",
            "line_start": 38,
            "line_end": 41
          },
          {
            "file": "SKILL.md",
            "line_start": 41,
            "line_end": 41
          },
          {
            "file": "SKILL.md",
            "line_start": 41,
            "line_end": 42
          },
          {
            "file": "SKILL.md",
            "line_start": 42,
            "line_end": 45
          },
          {
            "file": "SKILL.md",
            "line_start": 45,
            "line_end": 45
          },
          {
            "file": "SKILL.md",
            "line_start": 45,
            "line_end": 45
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 2,
    "total_lines": 222,
    "audit_model": "claude",
    "audited_at": "2026-01-16T16:49:21.834Z"
  },
  "content": {
    "user_title": "Apply Next.js App Router patterns",
    "value_statement": "Get best practices for Next.js 15 App Router including Server Components, layouts, and navigation patterns. Build modern React applications with proper architecture.",
    "seo_keywords": [
      "Next.js patterns",
      "Next.js App Router",
      "Server Components",
      "React server-side rendering",
      "next/link navigation",
      "useRouter hook",
      "Next.js metadata",
      "Claude Code",
      "Claude",
      "Codex"
    ],
    "actual_capabilities": [
      "Guide on App Router page structure and component placement",
      "Explain Server vs Client Component decisions",
      "Show proper navigation patterns with Link and useRouter",
      "Demonstrate data fetching in Server Components",
      "Provide metadata and SEO configuration examples"
    ],
    "limitations": [
      "Contains project-specific patterns not generic Next.js documentation",
      "Does not include code execution or file generation capabilities",
      "Requires existing Next.js project to apply patterns"
    ],
    "use_cases": [
      {
        "target_user": "React developers new to Next.js",
        "title": "Learn App Router fundamentals",
        "description": "Understand page layouts, component types, and navigation in Next.js 15"
      },
      {
        "target_user": "Full-stack developers",
        "title": "Apply server data patterns",
        "description": "Fetch data in Server Components and handle client-side data needs"
      },
      {
        "target_user": "Frontend architects",
        "title": "Structure Next.js projects",
        "description": "Design proper route layouts, metadata, and font optimization"
      }
    ],
    "prompt_templates": [
      {
        "title": "Basic page setup",
        "scenario": "Creating a new page with proper structure",
        "prompt": "Show me how to create a new page in Next.js App Router with proper Server Component structure"
      },
      {
        "title": "Client interaction",
        "scenario": "Adding stateful interactive components",
        "prompt": "How do I create a Client Component in Next.js App Router for state management"
      },
      {
        "title": "Navigation flow",
        "scenario": "Implementing route transitions",
        "prompt": "What is the difference between Link and useRouter for navigation in Next.js"
      },
      {
        "title": "Data fetching",
        "scenario": "Fetching data from APIs or databases",
        "prompt": "Show best practices for fetching data in Server Components versus Client Components"
      }
    ],
    "output_examples": [
      {
        "input": "How do I create a new dashboard page?",
        "output": [
          "Create app/dashboard/page.tsx",
          "Export default function as Server Component by default",
          "Use use client directive only for state or effects",
          "Add Link components for internal navigation",
          "Export metadata for SEO"
        ]
      },
      {
        "input": "When should I use Server Components vs Client Components?",
        "output": [
          "Use Server Components by default for better performance",
          "Use Client Components when you need useState or useEffect",
          "Use Client Components for event handlers and browser APIs",
          "Keep client-side logic in separate components"
        ]
      }
    ],
    "best_practices": [
      "Default to Server Components for better performance and security",
      "Use Link from next/link for all internal navigation links",
      "Keep client-side logic in separate components with use client directive",
      "Define metadata at page or layout level for SEO optimization"
    ],
    "anti_patterns": [
      "Avoid using useRouter when Link component would suffice",
      "Do not make all components Client Components unnecessarily",
      "Avoid fetching data in Client Components when Server Components can handle it"
    ],
    "faq": [
      {
        "question": "What versions of Next.js support App Router?",
        "answer": "Next.js 13 and later versions support the App Router. This skill focuses on Next.js 15 patterns."
      },
      {
        "question": "What is the maximum number of nested routes supported?",
        "answer": "Next.js supports deep nesting. Practical limits depend on project complexity and file organization."
      },
      {
        "question": "How do I integrate this with existing projects?",
        "answer": "Apply patterns to new routes in app directory. App Router can coexist with pages directory."
      },
      {
        "question": "Does this skill access any external data?",
        "answer": "No. This skill only provides documentation. No data is read, written, or transmitted."
      },
      {
        "question": "Why is my page not updating with navigation?",
        "answer": "Ensure you are using Link for navigation. Client Components using useRouter must be wrapped properly."
      },
      {
        "question": "How does this compare to the pages router?",
        "answer": "App Router offers Server Components by default, nested layouts, and streaming. Pages router is still supported."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 46
    }
  ]
}