메뉴
Next.js App Router patterns for the portfolio — the [locale] segment, layouts, metadata, static rendering, and loading/error route files. Use when creating route structure and page-level routing artifacts.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
next-intl i18n conventions for the portfolio — locale routing, message catalogs (3 locales), translation helpers, locale switcher, and middleware locale detection. Use when adding or translating pages, adding message keys, or touching anything under src/i18n or messages.
Create a new page section/block component for this Next.js + next-intl portfolio, following the project's Server/Client split, i18n, and angular-frame design conventions. Use when asked to "add a section", "new block", "create a component for the page", "add About/Projects/Skills-style section", or build any new piece of the portfolio UI.
Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>".
Add or update internationalized (i18n) copy across all locales in this next-intl portfolio. Use whenever introducing or changing any user-facing string, label, section title, or data key. Trigger on "add text", "new copy", "translate", "add a key", "update wording", "i18n", "new section title", or any task that surfaces visible text.
Project file organization, naming conventions, and import patterns. Use when creating new files, organizing code, or deciding where to place modules.
React component patterns — server vs client components, styling with cn(), props interfaces. Use when creating page sections or shared components.
| name | routing |
| description | Next.js App Router patterns for the portfolio — the [locale] segment, layouts, metadata, static rendering, and loading/error route files. Use when creating route structure and page-level routing artifacts. |
| paths | ["src/app/**"] |
The portfolio uses the Next.js App Router with a single locale segment. Routes
live in src/app/.
src/app/
├── layout.tsx # Root: <html>/<body>, providers, metadataBase
├── page.tsx # Redirect-only → /<locale> (exempt from metadata rule)
├── not-found.tsx
├── robots.ts · sitemap.ts · manifest.ts
└── [locale]/
├── layout.tsx # generateStaticParams + setRequestLocale + Header/Footer
└── page.tsx # Home page (composes src/block sections) + generateMetadata
[locale] layout (static rendering)import { setRequestLocale } from 'next-intl/server'
import { hasLocale } from 'next-intl'
import { notFound } from 'next/navigation'
import { routing } from '@/i18n/routing'
export function generateStaticParams() {
return routing.locales.map((locale) => ({ locale }))
}
export default async function LocaleLayout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ locale: string }>
}) {
const { locale } = await params
if (!hasLocale(routing.locales, locale)) notFound()
setRequestLocale(locale) // MUST be called before any next-intl API
return <>{children}</>
}
generateStaticParams + setRequestLocale are required — the harness
(check:harness, predicate 14) fails the layout without them.
Every non-redirect page.tsx exports generateMetadata (or a static
metadata). Build localized metadata with next-intl + siteConfig; never
hand-write canonical/hreflang URLs ad hoc. See the seo skill.
import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'
import { siteConfig } from '@/config/site'
export async function generateMetadata({
params,
}: {
params: Promise<{ locale: string }>
}): Promise<Metadata> {
const { locale } = await params
const t = await getTranslations({ locale, namespace: 'Seo' })
return { title: t('home.title'), description: t('home.description') }
}
// src/app/[locale]/loading.tsx
export default function Loading() {
return <div className="text-highlight p-8">Loading…</div>
}
// src/app/[locale]/error.tsx
'use client'
export default function Error({ reset }: { error: Error; reset: () => void }) {
return (
<div className="py-16 text-center">
<h2 className="text-xl font-semibold">Something went wrong</h2>
<button onClick={reset}>Try again</button>
</div>
)
}
'use client' to page.tsx — push interactivity to child components.metadata or generateMetadata in every non-redirect page.tsx.[locale] layout statically renderable (generateStaticParams +
setRequestLocale).loading.tsx / error.tsx for route-level Suspense and error boundaries.src/middleware.ts — don't reimplement it
per route.