nextjs-patterns

AbdulSamad94's avatarfrom AbdulSamad94

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

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 13, 2025
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides a comprehensive set of best practices and architectural patterns for Next.js 15, focusing on the App Router, Server Components, and efficient routing. It serves as a technical blueprint for developers to maintain code consistency, optimize performance through font and metadata management, and implement robust data fetching strategies within a modern web development workflow.

Use Cases

  • Architecting scalable web applications using the Next.js 15 App Router and nested layout patterns for consistent UI.
  • Determining the optimal use of Server vs. Client Components to balance interactivity and server-side performance.
  • Implementing standardized data fetching logic and programmatic navigation across complex project routes.
  • Enhancing SEO and web performance by utilizing built-in Next.js metadata configurations and font optimization tools.
nameNext.js Patterns
descriptionBest practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

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