Use this skill when creating routes, pages, layouts, or deciding Server vs Client Component boundaries in Next.js 16 App Router. Trigger words: ルーティング, ページ追加, layout, route, app router, Server Component, use client, dynamic route, generateMetadata.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
[id])を設定するとき。app/ 配下にルートを置く。フォルダ = URL セグメント、page.tsx が画面、layout.tsx が共有レイアウト。await する。'use client' の小さな葉に切り出す。generateMetadata を置き、title と OpenGraph を設定する。params を受け取り、必要なら generateStaticParams で SSG する。'use client' は必要箇所のみ、できるだけ末端へ。next/image、フォントは next/font。generateMetadata で title / OG を必須設定。revalidate と cache: 'no-store' を同時指定しない。export default を避け…られない場合だけ page/layout の規約に従う(Next.js は page をデフォルト export 必須とするため、ここは例外。それ以外のモジュールは named export)。// app/users/[id]/page.tsx — Server Component(デフォルト)
import type { Metadata } from 'next';
import { getUser } from '@/lib/users';
export async function generateMetadata(
{ params }: { params: Promise<{ id: string }> },
): Promise<Metadata> {
const { id } = await params;
const user = await getUser(id);
return { title: `${user.name} さんのプロフィール`, openGraph: { title: user.name } };
}
export default async function UserPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const user = await getUser(id);
return <UserProfile user={user} />; // インタラクティブ部分だけ別の 'use client' へ
}
'use client' を付けてサーバー取得の利点を捨てる。params を同期アクセスする(Next.js 16 では params/searchParams は Promise)。아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.