Marketplace next-js-patterns

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

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/abdulsamad94/next-js-patterns" ~/.claude/skills/aiskillstore-marketplace-next-js-patterns && rm -rf "$T"

manifest: skills/abdulsamad94/next-js-patterns/SKILL.md

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 = { ... }

page.tsx

layout.tsx

for SEO.