Skip to content
LiveNew tools this week
Submit
AIMarketly
next-js-patterns logo

Next.js Patterns

next-js-patterns

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

aiskillstore/marketplace0installs430starsMarketing

SKILL.md

Full skill instructions

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