Communitygithub.com

BIGboss248/nextjs-wordpress

Next.js App Router 국제화(i18n) 부트스트래핑, 설정 및 검증 (proxy.ts/middleware.ts, next/root-params, [locale] 레이아웃, 라우팅). "/nextjs-i18n-setup", "setup i18n", "install next-intl" 등의 트리거로 실행됩니다.

nextjs-wordpress란 무엇인가요?

이 스킬은 기존 Next.js App Router 프로젝트에 `next-intl` 라이브러리를 이용한 국제화(i18n)를 빠르게 부트스트래핑하고 구성하는 자동화된 에이전트 도구입니다. Next.js 16+ 이상에서는 최신 `proxy.ts`를, 그 이하 버전에서는 `middleware.ts`를 자동으로 선택하며, `next/root-params`를 활용한 최신 패턴을 적용합니다. `docs/project.json`에서 설정된 지원 언어 목록을 읽어 라우팅, 리퀘스트 핸들러, 네비게이션 헬퍼, Next.js 플러그인, 인터셉터, 메시지 사전 파일, 로케일 레이아웃 및 타입 증강까지 12단계의 체크리스트를 순차적으로 수행합니다. 또한 `verify-setup.ps1` 스크립트로 설치 및 설정을 검증하고 최종 빌드까지 자동화하여 안정적인 다국어 사이트 구축을 지원합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BIGboss248/nextjs-wordpress/tree/HEAD/.agents/skills/nextjs-i18n-setup
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Next.js i18n 설정 (nextjs-i18n-setup)

기존 Next.js App Router 프로젝트에 next-intl 을 최신 next/root-params , 동적 세그먼트 app/[locale]/ 및 Next.js 16+ (proxy.ts) / Next.js <=15 (middleware.ts) 를 사용하여 부트스트래핑하고 스캐폴딩합니다.

[!TIP] 보일러플레이트 및 템플릿: 파일 스캐폴딩 시 전체 드롭인 코드 템플릿은 references/templates.md를 참조하세요. 빠른 실행: 검증은 경량 서브에이전트(Model: 'flash')에 위임하세요.

1. 아키텍처 규칙 및 요구사항

  1. 메타데이터 계약: docs/project.json에 다음이 포함되어 있는지 확인합니다: 
    "dictionaries_dir": "messages",
"dictionary_file_pattern": "[locale].json"
  2. Next.js 버전 인터셉터:
    • Next.js 16+: proxy.ts (또는 src/proxy.ts)를 사용합니다. 레거시 middleware.ts를 마이그레이션하고 제거합니다.
    • Next.js <=15: middleware.ts (또는 src/middleware.ts)를 사용합니다.
  3. 최신 Root Params: i18n/request.ts에서 next/root-params (await rootParams.locale())를 사용합니다. requestLocale 및 setRequestLocale()은 더 이상 사용되지 않습니다.
  4. 네비게이션: i18n/navigation.ts에서 Link, redirect, usePathname, useRouter를 내보냅니다 (순수 TypeScript, JSX 없음).
  5. 정적 생성: 루트 레이아웃 app/[locale]/layout.tsx는 지원되는 모든 로케일에 대해 { locale }을 반환하는 generateStaticParams()를 반드시 내보내야 합니다.

2. 설정 체크리스트

  • 단계 0: 감사: docs/project.json (supported_languages) 및 package.json에서 Next.js 버전을 확인합니다.
  • 단계 1: 설치: <pkg_mgr> add next-intl (pnpm add next-intl)을 실행합니다.
  • 단계 2: 설정 메타데이터: docs/project.json에 dictionaries_dir: "messages"가 있는지 확인합니다.
  • 단계 3: 라우팅: defineRouting을 사용하여 i18n/routing.ts를 생성합니다 (템플릿 참조).
  • 단계 4: 요청 핸들러: next/root-params를 사용하여 i18n/request.ts를 생성합니다 (템플릿 참조).
  • 단계 5: 네비게이션 헬퍼: i18n/navigation.ts를 생성합니다 (템플릿 참조).
  • 단계 6: Next 플러그인: next.config.ts를 createNextIntlPlugin()으로 래핑합니다 (템플릿 참조).
  • 단계 7: 인터셉터: 에셋 필터링 매처와 함께 proxy.ts (Next 16+) 또는 middleware.ts (Next <=15)를 생성합니다 (템플릿 참조).
  • 단계 8: 시작 사전: 지원되는 모든 로케일에 대해 messages/[locale].json이 존재하고 일치하는 기본 키를 가지고 있는지 확인합니다.
  • 단계 9: 레이아웃 및 라우트 마이그레이션: 최상위 라우트를 app/[locale]/로 이동합니다. 동적 dir, lang, generateStaticParams 및 <NextIntlClientProvider>를 구성합니다 (템플릿 참조).
  • 단계 10: 타입 증강: global.d.ts에 AppConfig.Messages를 선언합니다 (템플릿 참조).
  • 단계 11: 네비게이션 임포트: 기존 컴포넌트 전체의 내부 링크를 @/i18n/navigation을 사용하도록 업데이트합니다.
  • 단계 12: 검증: 검증 스크립트를 실행하고 빌드합니다: 
    pwsh .agents/skills/nextjs-i18n-setup/scripts/verify-setup.ps1 -Quiet
pnpm run build

3. 설정 실행 보고서 템플릿

## 🌐 Next.js i18n 설정 실행 보고서

| 단계 / 컴포넌트      | 대상 파일                      | 상태                             | 비고                      |
| :------------------ | :----------------------------- | :------------------------------- | :------------------------ |
| **패키지**           | `package.json` (`next-intl`)   | `[구현됨]` / `[변경되지 않음]`   | 설치된 런타임               |
| **프로젝트 설정**     | `docs/project.json`            | `[구현됨]` / `[변경되지 않음]`   | 설정된 메시지 디렉토리      |
| **라우팅**           | `i18n/routing.ts`              | `[구현됨]` / `[변경되지 않음]`   | 로케일 및 기본값           |
| **요청**             | `i18n/request.ts`              | `[구현됨]` / `[변경되지 않음]`   | next/root-params          |
| **네비게이션**        | `i18n/navigation.ts`           | `[구현됨]` / `[변경되지 않음]`   | 순수 TS 헬퍼              |
| **플러그인**          | `next.config.ts`               | `[구현됨]` / `[변경되지 않음]`   | withNextIntl 래핑됨       |
| **인터셉터**          | `proxy.ts` / `middleware.ts`   | `[구현됨]` / `[변경되지 않음]`   | 라우트 매처               |
| **사전**             | `messages/[locale].json`       | `[구현됨]` / `[변경되지 않음]`   | 시작 사전                 |
| **레이아웃**          | `app/[locale]/layout.tsx`      | `[구현됨]` / `[변경되지 않음]`   | 정적 매개변수 및 프로바이더 |
| **타입**             | `global.d.ts`                  | `[구현됨]` / `[변경되지 않음]`   | AppConfig 증강            |
| **검증**             | `verify-setup.ps1` 및 빌드     | `[통과]`                         | 깔끔한 빌드               |

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

BIGboss248/nextjs-wordpress

Create, configure, manage, and validate Google Antigravity customizations including skills, rules, MCP servers, lifecycle hooks, plugins, and custom JSON configs. Use when adding new capabilities to Antigravity, configuring MCP servers, writing rules, creating skills, setting up hooks, or modernizing legacy workflows.

BIGboss248/nextjs-wordpress

Spawn multiple agents into a shared conversation where they debate, disagree, and converge on a solution via a shared chat.json file. Use for architecture decisions, code review debates, design trade-offs, or any problem that benefits from adversarial reasoning. Triggers on "chatroom", "agent debate", "have agents discuss", "agent chatroom", "debate this", or /agent-chatrooms. Also triggers on phrases like "have 3 agents argue about", "multi-agent discussion", or "let them debate".

BIGboss248/nextjs-wordpress

Always-active code intelligence, search, and navigation skill utilizing the codebase-memory MCP server. Enforces an index-first protocol (verifying and refreshing the knowledge graph via index_repository or index_status before searching, required because background auto_watch is disabled to eliminate editor stutter and system lag), followed by graph-first exploration (search_graph, trace_path, get_code_snippet, query_graph, get_architecture, detect_changes) instead of naive text grep or full-file reads. Always activate before searching the codebase, inspecting unknown architecture, finding symbols, or tracing callers/callees.

BIGboss248/nextjs-wordpress

>- Discover, interview, and craft comprehensive UX/UI design specifications (design-spec.md) and design tokens for web components. Triggers on "/component-design", "design component", "design section", "design UI", "wireframe component", or "create design spec".

BIGboss248/nextjs-wordpress

>- Configure and query WooCommerce APIs including WPGraphQL, WooGraphQL, and JWT auth for headless frontends. Use when connecting Next.js to WooCommerce or fetching store catalog data.

BIGboss248/nextjs-wordpress

Orchestrate parallel browser automation using multiple Chrome DevTools MCP instances. Use when a task requires doing the same browser action across many targets simultaneously (e.g., submitting contact forms, filling applications, scraping pages that need JS rendering). Spin up 1-5 parallel Chrome agents.

BIGboss248/nextjs-wordpress

Workflow for spawning an independent subagent to conduct unbiased code reviews and inject adversarial edge-case tests ([ComponentName].edge.test.tsx).

BIGboss248/nextjs-wordpress

>- Build Next.js App Router React components with Suspense skeletons, semantic OKLCH tokens, Jest + RTL unit tests, Playwright visual/hydration checks, and Tailwind logical styling. Triggers on "/nextjs-component-dev", "create component", "new component", "build component", or "develop component".

BIGboss248/nextjs-wordpress

>- Bootstrap, configure, and verify the complete Next.js App Router development environment, developer tooling, testing suites, MCP servers, Docker containerization, and CI/CD. Triggers on "/nextjs-dev-setup", "setup nextjs dev environment", "start a nextjs project", or "containerize nextjs app".

BIGboss248/nextjs-wordpress

>- Configure production health monitoring endpoints (/api/health), Docker Compose probes, and runtime metrics in Next.js App Router applications. Use when asked to "setup health check", "add health endpoint", "docker compose healthcheck nextjs", "configure health monitor", or "/nextjs-healthcheck".

BIGboss248/nextjs-wordpress

Read/write translation dictionaries (messages/[locale].json), next-intl hooks (getTranslations/useTranslations), providers (Storybook/tests/subtrees), and BiDi styling. Triggers on "/nextjs-i18n-usage", "i18n dictionary", "use translations", "read dictionary", "i18n provider", "next-intl hooks", "storybook i18n", "test i18n", "add translation keys", "localize component", "create a component", "update a component".

BIGboss248/nextjs-wordpress

>- Configure, test, and verify OpenTelemetry (OTel) observability in Next.js App Router applications. Triggers on "/nextjs-otel", "setup otel", "configure opentelemetry", "test otel", or "verify opentelemetry".

BIGboss248/nextjs-wordpress

Step-by-step workflow for designing and building Next.js App Router pages (RSC page.tsx, loading skeleton, metadata, JSON-LD schema, and dynamic static params). Triggers on "/nextjs-page-dev", "create page", "new page", "develop page", "build route", or "implement page".

BIGboss248/nextjs-wordpress

>- Orchestrate end-to-end planning for Next.js App Router projects, generating canonical specifications, design systems, and a 7-phase modular implementation roadmap in docs/plan/. Triggers on "/nextjs-plan", "plan a nextjs project", "plan nextjs app", "create nextjs project plan", "outline nextjs architecture", or "generate plan".

BIGboss248/nextjs-wordpress

Workflow and engineering standards for crafting co-located Storybook CSF3 stories ([ComponentName].stories.tsx) with interactive controls, action spies, and 4 canonical theme variants.

BIGboss248/nextjs-wordpress

>- Build Next.js e-commerce frontends backed by WooCommerce APIs, handling ISR catalogs, cart sessions, and JWT authentication. Use when building or querying Next.js stores with WooCommerce.

BIGboss248/nextjs-wordpress

Self-correcting rules engine and feedback loop that learns from user corrections, mistakes, and project-specific constraints by maintaining a persistent autofix ruleset. Scans learned rules before starting any task, resolves conflicts, and automatically appends new rules upon corrections. Triggers on user corrections ("no, do it this way", "never do X", "always use Y"), /learn, "self repair", "add rule", "update rules", or when diagnosing assumptions and bugs. CRITICAL ALWAYS-ACTIVE LIFECYCLE SKILL. Must always be kept in context, loaded at session start, and consulted before starting ANY task to read and apply active constraints from autofix.json. MUST ALWAYS be triggered immediately whenever the user provides ANY correction, preference, criticism, rejection of an approach, or adjustment ("no", "don't do X", "use Y", "remember", "prefer"), or when any mistake/bug is identified. Automatically and immediately formulates and appends the new imperative rule to the project's autofix.json ruleset file.

BIGboss248/nextjs-wordpress

Setup, automate, and execute SEO audits, CI/CD pre-push/pre-deploy checks, and ranking optimizations using the seo CLI and MCP server.

BIGboss248/nextjs-wordpress

End-to-end repository onboarding and development environment setup skill. Scans repository structure, configures project metadata (docs/project.json), sets up the codebase-memory-mcp code intelligence knowledge graph server (in workspace mcp.json and globally for AGY only), configures git hooks with Husky and Commitlint, establishes multi-stage production Docker containerization, and automates credit-optimized Release Please CI/CD with multi-arch (AMD64 & ARM64) GHCR package deployment. Triggers on "/setup-repository", "setup repository", "setup repo", "initialize repository", "new repo setup", or when preparing any repository for development and AI agent workflows.

BIGboss248/nextjs-wordpress

AI screen scaffolding, layout generation, and variant exploration workflow powered by Google Stitch (StitchMCP). Consumes a component design specification (docs/design/components/[page name]/[component name]/design-spec.md), verifies and reuses the central Stitch project in docs/project.json (or creates/persists one if absent), seeds the project's design system into Stitch, synthesizes layout prompts to generate a screen and create one variant of the given design spec file, downloads and saves Stitch JPG screenshots and HTML code files directly into docs/design/components/[page name]/[component name]/stitch/ using binary-safe PowerShell Invoke-WebRequest, outputs image prompts to the user if visual assets are needed (without calling generate_image to conserve tokens), updates design-spec.md with Stitch layout benchmarks, and audits asset download integrity with an independent subagent. Triggers on "/stitch-design", "generate stitch screen", "create stitch variant", "scaffold screen with stitch", or "stitch...

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community