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

nextjs-modern

스타37

포크5

업데이트2026년 6월 24일 12:41

Build modern Next.js (16, App Router) apps with React Server Components. Use when creating or reviewing Next.js routes, layouts, server/client components, data fetching, Server Actions, caching, or metadata in the frontend app.

설치

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

Manus에서 실행

출처

clubpay

clubpay/ronykit

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

다운로드

Manus에서 실행

Modern Next.js (App Router)

Default to the server. Reach for the client only when you need interactivity. Target Next.js 16 with the App Router and React Server Components.

When to use

Adding or reviewing routes, layouts, pages, or components in the frontend app.
Choosing server vs client components, a data-fetching strategy, or caching.
Wiring forms and mutations via Server Actions.

Server vs Client Components

Components are Server Components by default. Add 'use client' only when you need state, effects, event handlers, or browser-only APIs.

Keep 'use client' at the leaves; pass server-fetched data down as props.
Don't put 'use client' on a layout/page just to use one interactive child — split the child out.
Never import server-only code (DB clients, secrets) into a client component.
Minimize the serialization boundary: props crossing server → client are serialized into the RSC payload. Pass only the minimal, serializable fields a client component needs — not whole ORM rows or large objects. Non-serializable values (functions, class instances, Dates in some setups) won't cross.

Data fetching

Fetch directly in async Server Components — no useEffect for initial data.
Choose the cache explicitly: static by default, revalidate for ISR, cache: 'no-store' / dynamic for per-request data.
Stream slow data with <Suspense> and loading.tsx; colocate error.tsx.
Use next/cache (revalidateTag/revalidatePath) to invalidate after writes.

Avoid request waterfalls

Fetch independent data in parallel, not sequentially. Kick off the requests, then await together:

const [user, posts] = await Promise.all([getUser(id), getPosts(id)]);

Don't await a request only to pass its result into the next independent one — that serializes round-trips and inflates TTFB.
Stream non-critical sections behind their own <Suspense> so the shell renders immediately.

Deduplicate requests

fetch is automatically deduped within a render pass — call it where the data is needed instead of prop-drilling.
For non-fetch data sources (DB/ORM), wrap the loader in React cache() so repeated calls in one render hit the source once:

import { cache } from 'react';
export const getUser = cache(async (id: string) => db.user.find(id));

Mutations — Server Actions

Use Server Actions for form submissions and mutations instead of hand-rolled API routes where possible.
Authenticate and authorize inside every action. A Server Action is a public POST endpoint — hiding the button in the UI does not protect it. Re-check the session and the caller's permission to act on the target resource at the top of the action, before any mutation.
Validate input on the server (e.g. Zod) — never trust the client.
Revalidate or redirect after a successful mutation.

Routing & structure

Use the file conventions: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, route groups (group), dynamic [param].
Co-locate components/tests with the route; share via a top-level module.
<Link> for navigation; next/image and next/font for assets.

Metadata & a11y

Export metadata or generateMetadata for SEO instead of manual <head>.
Semantic HTML, labelled controls, keyboard reachability.

Performance

Keep client bundles small; prefer Server Components and next/dynamic for heavy client-only widgets.
Use next/image (sizing, lazy loading) and avoid layout shift.
Pick the runtime deliberately: default Node.js runtime for full APIs; opt into the Edge runtime (export const runtime = 'edge') only for light, latency- sensitive routes that don't need Node-only APIs.
Profile before optimizing — use the bundle analyzer and a Lighthouse pass to confirm wins (TTFB, payload size) rather than guessing.

Checklist

Default to Server Components; 'use client' only where required and at leaves.
Independent data fetched in parallel; loaders deduped; no waterfalls.
Caching strategy chosen deliberately per fetch.
Mutations authorize the caller, validate input server-side, and revalidate affected data.
pnpm lint, pnpm typecheck, and tests pass.

이 저장소의 다른 Skills

같은 저장소

react-performance

clubpay/ronykit

Optimize React/Next.js runtime performance — eliminate waterfalls, shrink bundles, cut unnecessary re-renders, and speed up rendering. Use when writing, reviewing, or refactoring components for speed, or chasing slow renders, large bundles, janky interactions, or high TTFB/LCP/INP.

2026-07-0437

webmcp

clubpay/ronykit

Build agent-friendly web apps with the W3C Web Model Context API (WebMCP). Use when exposing frontend features as structured tools for in-browser AI agents, adding document.modelContext tools to React/Next.js apps, designing tool schemas for dashboards or admin UIs, or making existing UI automatable without DOM scraping.

2026-07-0437

go-testing

clubpay/ronykit

Write clear, fast, deterministic Go tests including mandatory repo integration tests (x/testkit) and app unit tests. Use when adding or fixing Go tests, implementing internal/repo or internal/app, designing table-driven tests, writing benchmarks, using testify, or improving coverage in this workspace.

2026-06-2537

frontend-design

clubpay/ronykit

Design distinctive, production-grade frontend interfaces that don't read as templated AI defaults. Use when bootstrapping a frontend app, building or restyling a landing page, marketing site, hero, brand-forward product surface, or any UI where visual identity matters — choosing palette, typography, layout, motion, and copy. Required before running create-next-app or writing UI.

2026-06-2537

code-review

clubpay/ronykit

Review code (your own or others') for correctness, design, and risk before it merges. Use when reviewing a diff or pull request, doing a self-review before opening a PR, or giving structured, prioritized feedback.

2026-06-2437

design-tokens

clubpay/ronykit

Architect a scalable, themeable design-token system — primitive → semantic → component layers, CSS variables, a 4px spacing/type scale, and dark mode. Use when setting up or refactoring a project's tokens, naming color/spacing/radius values, wiring tokens into Tailwind/shadcn, enabling theme switching, or killing hard-coded hex/px scattered through components.

2026-06-2437

name	nextjs-modern
description	Build modern Next.js (16, App Router) apps with React Server Components. Use when creating or reviewing Next.js routes, layouts, server/client components, data fetching, Server Actions, caching, or metadata in the frontend app.

Modern Next.js (App Router)

Default to the server. Reach for the client only when you need interactivity. Target Next.js 16 with the App Router and React Server Components.

When to use

Adding or reviewing routes, layouts, pages, or components in the frontend app.
Choosing server vs client components, a data-fetching strategy, or caching.
Wiring forms and mutations via Server Actions.

Server vs Client Components

Components are Server Components by default. Add 'use client' only when you need state, effects, event handlers, or browser-only APIs.

Keep 'use client' at the leaves; pass server-fetched data down as props.
Don't put 'use client' on a layout/page just to use one interactive child — split the child out.
Never import server-only code (DB clients, secrets) into a client component.
Minimize the serialization boundary: props crossing server → client are serialized into the RSC payload. Pass only the minimal, serializable fields a client component needs — not whole ORM rows or large objects. Non-serializable values (functions, class instances, Dates in some setups) won't cross.

Data fetching

Fetch directly in async Server Components — no useEffect for initial data.
Choose the cache explicitly: static by default, revalidate for ISR, cache: 'no-store' / dynamic for per-request data.
Stream slow data with <Suspense> and loading.tsx; colocate error.tsx.
Use next/cache (revalidateTag/revalidatePath) to invalidate after writes.

Avoid request waterfalls

Fetch independent data in parallel, not sequentially. Kick off the requests, then await together:

const [user, posts] = await Promise.all([getUser(id), getPosts(id)]);

Don't await a request only to pass its result into the next independent one — that serializes round-trips and inflates TTFB.
Stream non-critical sections behind their own <Suspense> so the shell renders immediately.

Deduplicate requests

fetch is automatically deduped within a render pass — call it where the data is needed instead of prop-drilling.
For non-fetch data sources (DB/ORM), wrap the loader in React cache() so repeated calls in one render hit the source once:

import { cache } from 'react';
export const getUser = cache(async (id: string) => db.user.find(id));

Mutations — Server Actions

Use Server Actions for form submissions and mutations instead of hand-rolled API routes where possible.
Authenticate and authorize inside every action. A Server Action is a public POST endpoint — hiding the button in the UI does not protect it. Re-check the session and the caller's permission to act on the target resource at the top of the action, before any mutation.
Validate input on the server (e.g. Zod) — never trust the client.
Revalidate or redirect after a successful mutation.

Routing & structure

Use the file conventions: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, route groups (group), dynamic [param].
Co-locate components/tests with the route; share via a top-level module.
<Link> for navigation; next/image and next/font for assets.

Metadata & a11y

Export metadata or generateMetadata for SEO instead of manual <head>.
Semantic HTML, labelled controls, keyboard reachability.

Performance

Keep client bundles small; prefer Server Components and next/dynamic for heavy client-only widgets.
Use next/image (sizing, lazy loading) and avoid layout shift.
Pick the runtime deliberately: default Node.js runtime for full APIs; opt into the Edge runtime (export const runtime = 'edge') only for light, latency- sensitive routes that don't need Node-only APIs.
Profile before optimizing — use the bundle analyzer and a Lighthouse pass to confirm wins (TTFB, payload size) rather than guessing.

Checklist

Default to Server Components; 'use client' only where required and at leaves.
Independent data fetched in parallel; loaders deduped; no waterfalls.
Caching strategy chosen deliberately per fetch.
Mutations authorize the caller, validate input server-side, and revalidate affected data.
pnpm lint, pnpm typecheck, and tests pass.