agentsclimarketplace
Sign in

Next js patterns

Skill aiskillstore/marketplace/skills/abdulsamad94/next-js-patterns

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

Install
npx -y skills add aiskillstore/marketplace --skill next-js-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

1.5 KB, 336 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it: 1 file

18.6 KB alongside SKILL.md

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.