원클릭으로 Manus에서 모든 스킬 실행

react-best-practices

스타2

포크1

업데이트2026년 5월 12일 16:32

Trigger: Next.js App Router, data fetching, Server vs Client components, images, fonts, SEO metadata, Suspense. Next.js 13+ best practices. Skip: non-Next.js React questions.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

gonaas

gonaas/skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

React Best Practices (Next.js / Vercel)

Hard Rules

Never use "use client" at page or layout level — always push it to the leaf component
Never use useEffect for server-side data fetching — use async/await in Server Components
Never use <img> — always next/image
Never load fonts from a CDN — always next/font
Never use manual <head> tags for metadata — always the Metadata API
Never create a Route Handler for internal data — fetch in Server Components or use Server Actions

Golden Rule: Server Components by Default

Every component is a Server Component unless it needs:

useState / useReducer / useEffect
Browser-only APIs (window, document, localStorage)
Event listeners (onClick, onChange)
Third-party libraries that require client context

If none of the above → Server Component. No "use client".

`"use client"` Placement

Push "use client" as deep as possible — to the leaf that actually needs it, never to a layout or page.

// Bad — marks entire page as client
"use client"
export default function Page() { ... }

// Good — only the interactive leaf is client
export default function Page() {      // Server Component
  return <Layout><InteractiveForm /></Layout>
}
// interactive-form.tsx
"use client"
export function InteractiveForm() { ... }

Data Fetching

Fetch data directly in Server Components with async/await. No useEffect, no SWR, no React Query for server-side data.

// Good — fetch in Server Component
export default async function UserProfile({ id }: { id: string }) {
  const user = await db.users.findById(id)  // direct, no API round-trip
  return <Profile user={user} />
}

For client-side data (mutations, real-time): use Server Actions or Route Handlers.

Images

Always use next/image. Never <img>.

import Image from "next/image"
<Image src="/hero.jpg" alt="Hero" width={800} height={400} priority />

Add priority for above-the-fold images. Define sizes for responsive images.

Fonts

Always use next/font. Never load fonts from CDN in <head>.

import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] })
export default function Layout({ children }) {
  return <html className={inter.className}>{children}</html>
}

Metadata

Use the Metadata API — never manual <head> tags.

// app/page.tsx
export const metadata = {
  title: "My App",
  description: "My app description",
}

Suspense & Loading States

Use loading.tsx for route-level loading states. Use <Suspense> for component-level.

// app/dashboard/loading.tsx  — automatic skeleton
export default function Loading() { return <DashboardSkeleton /> }

// In a Server Component
<Suspense fallback={<ChartSkeleton />}>
  <SlowChart />   {/* streams in when ready */}
</Suspense>

Error Handling

Use error.tsx for route-level errors. Must be a Client Component.

// app/dashboard/error.tsx
"use client"
export default function Error({ error, reset }: { error: Error, reset: () => void }) {
  return <div><p>{error.message}</p><button onClick={reset}>Retry</button></div>
}

Route Handlers

Only use Route Handlers (app/api/route.ts) for:

Webhooks from external services
APIs consumed by external clients
OAuth callbacks

Do not create Route Handlers for internal data fetching — fetch directly in Server Components or use Server Actions.

Supporting Files

references/server-vs-client.md — Decision tree: when to use Server vs Client Component
references/patterns.md — Common patterns: Server Actions, parallel data fetching, caching

이 저장소의 다른 Skills

같은 저장소

engram-memory

gonaas/skills

Trigger: backup memories, restore memories, máquina nueva, respaldar engram, sync memoria, engram-memories. Backup/restore Engram chunks + Claude auto-memory to gonaas/engram-memories. Skip: in-session mem_save/search (use engram MCP).

2026-06-292

gentle-ai

gonaas/skills

Trigger: gentle-ai, configurar agentes, ecosystem doctor, actualizar gentle-ai, sdd status, sdd continue, gga review, skill-registry. Drive the Gentle-AI ecosystem CLI from Claude Code. Skip: running SDD phases (use sdd-* skills).

2026-06-292

boris

gonaas/skills

Trigger: Claude Code, CLAUDE.md, plan mode, shift+tab, MCP, worktrees, hooks, /loop, /schedule, voice mode, permissions, auto mode. Tips from Boris Cherny. Invoke proactively during work — surface tips as user edits.

2026-05-122

branch-pr

gonaas/skills

Create pull requests with Conventional Commits and issue-first checks. Trigger: creating branches, opening PRs, or preparing changes for review.

2026-05-122

chained-pr

gonaas/skills

Trigger: PRs over 400 lines, stacked PRs, review slices. Split oversized changes into chained PRs that protect review focus.

2026-05-122

cognitive-doc-design

gonaas/skills

Design docs that reduce cognitive load. Trigger: writing guides, READMEs, RFCs, onboarding, architecture, or review-facing docs.

2026-05-122

name	react-best-practices
description	Trigger: Next.js App Router, data fetching, Server vs Client components, images, fonts, SEO metadata, Suspense. Next.js 13+ best practices. Skip: non-Next.js React questions.
author	Gonzalo Astudillo
version	1.0.0
date	"2026-04-14T00:00:00.000Z"
user-invocable	true

React Best Practices (Next.js / Vercel)

Hard Rules

Never use "use client" at page or layout level — always push it to the leaf component
Never use useEffect for server-side data fetching — use async/await in Server Components
Never use <img> — always next/image
Never load fonts from a CDN — always next/font
Never use manual <head> tags for metadata — always the Metadata API
Never create a Route Handler for internal data — fetch in Server Components or use Server Actions

Golden Rule: Server Components by Default

Every component is a Server Component unless it needs:

useState / useReducer / useEffect
Browser-only APIs (window, document, localStorage)
Event listeners (onClick, onChange)
Third-party libraries that require client context

If none of the above → Server Component. No "use client".

`"use client"` Placement

Push "use client" as deep as possible — to the leaf that actually needs it, never to a layout or page.

// Bad — marks entire page as client
"use client"
export default function Page() { ... }

// Good — only the interactive leaf is client
export default function Page() {      // Server Component
  return <Layout><InteractiveForm /></Layout>
}
// interactive-form.tsx
"use client"
export function InteractiveForm() { ... }

Data Fetching

Fetch data directly in Server Components with async/await. No useEffect, no SWR, no React Query for server-side data.

// Good — fetch in Server Component
export default async function UserProfile({ id }: { id: string }) {
  const user = await db.users.findById(id)  // direct, no API round-trip
  return <Profile user={user} />
}

For client-side data (mutations, real-time): use Server Actions or Route Handlers.

Images

Always use next/image. Never <img>.

import Image from "next/image"
<Image src="/hero.jpg" alt="Hero" width={800} height={400} priority />

Add priority for above-the-fold images. Define sizes for responsive images.

Fonts

Always use next/font. Never load fonts from CDN in <head>.

import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] })
export default function Layout({ children }) {
  return <html className={inter.className}>{children}</html>
}

Metadata

Use the Metadata API — never manual <head> tags.

// app/page.tsx
export const metadata = {
  title: "My App",
  description: "My app description",
}

Suspense & Loading States

Use loading.tsx for route-level loading states. Use <Suspense> for component-level.

// app/dashboard/loading.tsx  — automatic skeleton
export default function Loading() { return <DashboardSkeleton /> }

// In a Server Component
<Suspense fallback={<ChartSkeleton />}>
  <SlowChart />   {/* streams in when ready */}
</Suspense>

Error Handling

Use error.tsx for route-level errors. Must be a Client Component.

// app/dashboard/error.tsx
"use client"
export default function Error({ error, reset }: { error: Error, reset: () => void }) {
  return <div><p>{error.message}</p><button onClick={reset}>Retry</button></div>
}

Route Handlers

Only use Route Handlers (app/api/route.ts) for:

Webhooks from external services
APIs consumed by external clients
OAuth callbacks

Do not create Route Handlers for internal data fetching — fetch directly in Server Components or use Server Actions.

Supporting Files

references/server-vs-client.md — Decision tree: when to use Server vs Client Component
references/patterns.md — Common patterns: Server Actions, parallel data fetching, caching

react-best-practices

React Best Practices (Next.js / Vercel)

Hard Rules

Golden Rule: Server Components by Default

"use client" Placement

Data Fetching

Images

Fonts

Metadata

Suspense & Loading States

Error Handling

Route Handlers

Supporting Files

이 저장소의 다른 Skills

이 저장소의 다른 Skills

React Best Practices (Next.js / Vercel)

Hard Rules

Golden Rule: Server Components by Default

"use client" Placement

Data Fetching

Images

Fonts

Metadata

Suspense & Loading States

Error Handling

Route Handlers

Supporting Files

`"use client"` Placement

`"use client"` Placement