From kuroco-skills
Kurocoとフロントエンドフレームワークの統合パターンおよびAI自動デプロイメント。使用キーワード:「Kuroco Nuxt」「Kuroco Next.js」「フロントエンド連携」「Nuxt3」「Nuxt2」「App Router」「Pages Router」「SSG」「SSR」「静的生成」「コンテンツ表示」「ログイン実装」「会員登録」「signup」「KurocoPages」「フロントエンド環境構築」「Vue」「React」「useAsyncData」「$fetch」「asyncData」「composable」「useAuth」「認証状態」「プロフィール取得」「profile」「generateStaticParams」「動的ルート」「v-html」「dangerouslySetInnerHTML」「XSS対策」「サードパーティCookie」「credentials include」「AI自動デプロイ」「Kuroco自動化」「サイト登録API」「自動ビルド」「自動デプロイ」「temp-upload」「presigned URL」「S3アップロード」「artifact_url」「KurocoFront」「プレビューデプロイ」「stage_url」「add_site」「site_key」「kuroco_front/deploy」「CI/CD」「フロントエンドビルド」「ZIP配備」「自動公開」「nuxt generate」「next build」「vite build」「デプロイAPI」「一時アップロード」「署名付きURL」。Nuxt/Next.jsでのKuroco連携、認証実装、SSG/SSR設定、AI自動デプロイに関する質問で使用。
How this skill is triggered — by the user, by Claude, or both
Slash command
/kuroco-skills:frontend-integrationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Kuroco HeadlessCMSとNuxt.js/Next.jsなどのフロントエンドフレームワークの統合パターン、およびAI自動デプロイメント。
Kuroco HeadlessCMSとNuxt.js/Next.jsなどのフロントエンドフレームワークの統合パターン、およびAI自動デプロイメント。
ドキュメント参照: /kuroco-docs スキルを使用してKuroco公式ドキュメントを検索・参照できます。
チュートリアル: フロントエンドのデプロイ手順やサンプルサイトの構築方法は Kurocoサンプルサイトチュートリアル を参照してください。
| フレームワーク | バージョン | 推奨ユースケース |
|---|---|---|
| Nuxt.js 3.x | Vue 3系 | 新規プロジェクト(推奨) |
| Nuxt.js 2.x | Vue 2系 | 既存プロジェクト |
| Next.js 13+ | React (App Router) | 新規Reactプロジェクト |
| Next.js (Pages) | React (Pages Router) | 既存Reactプロジェクト |
# .env.local
NUXT_PUBLIC_API_BASE=https://example.g.kuroco.app
NEXT_PUBLIC_API_BASE=https://example.g.kuroco.app
API_ID=1
Nuxt.js:
pages/
├── news/
│ ├── index.vue # 一覧
│ └── [slug].vue # 詳細 (Nuxt3)
├── login.vue
└── profile.vue
composables/
├── useAuth.ts
└── useApi.ts
Next.js (App Router):
app/
├── news/
│ ├── page.tsx # 一覧
│ └── [slug]/page.tsx
├── login/page.tsx
└── profile/page.tsx
lib/
├── auth.ts
└── api.ts
www.example.com と api.example.com管理画面: [API] → [セキュリティ] → [CORS設定]
CORS_ALLOW_ORIGINS:
- http://localhost:3000
- https://your-frontend-domain.com
CORS_ALLOW_CREDENTIALS: true
CORS_ALLOW_METHODS:
- GET
- POST
interface LoginResponse {
grant_token: string
status: number
member_id: number
}
async function login(email: string, password: string): Promise<LoginResponse> {
const response = await fetch(
'https://example.g.kuroco.app/rcms-api/1/login',
{
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
}
)
if (!response.ok) {
const error = await response.json()
throw new Error(error.errors?.[0]?.message || 'ログインに失敗しました')
}
return response.json()
}
async function logout(): Promise<void> {
await fetch('https://example.g.kuroco.app/rcms-api/1/logout', {
method: 'POST',
credentials: 'include'
})
}
async function checkAuth(): Promise<ProfileResponse | null> {
try {
const response = await fetch(
'https://example.g.kuroco.app/rcms-api/1/profile',
{ credentials: 'include' }
)
if (!response.ok) return null
return response.json()
} catch {
return null
}
}
async function signup(memberData: SignupData): Promise<void> {
const response = await fetch(
'https://example.g.kuroco.app/rcms-api/1/member/insert',
{
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(memberData)
}
)
if (!response.ok) {
const error = await response.json()
throw new Error(error.errors?.[0]?.message || '登録に失敗しました')
}
}
詳細な実装例: references/nuxt.md を参照
クイックスタート(Nuxt 3):
// composables/useKurocoApi.ts
export function useKurocoApi() {
const config = useRuntimeConfig()
async function get<T>(endpoint: string, params?: Record<string, any>): Promise<T> {
const query = params ? `?${new URLSearchParams(params)}` : ''
return await $fetch<T>(
`${config.public.apiBase}/rcms-api/${config.public.apiId}/${endpoint}${query}`,
{ credentials: 'include' }
)
}
return { get }
}
詳細な実装例: references/nextjs.md を参照
クイックスタート(App Router):
// lib/api.ts
export async function apiGet<T>(endpoint: string): Promise<T> {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_BASE}/rcms-api/1/${endpoint}`,
{ credentials: 'include', cache: 'no-store' }
)
if (!response.ok) throw new Error(`API Error: ${response.status}`)
return response.json()
}
KurocoPagesはKurocoが提供するフロントエンドホスティングサービス。
// kuroco_front.json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
デプロイ: 管理画面 → フロントエンド → KurocoPages → GitHubリポジトリ連携
SafariなどではサードパーティCookieがブロックされます。
解決策: APIドメインとフロントエンドドメインを同一ドメイン(サブドメイン違い)に設定
v-html や dangerouslySetInnerHTML を使用する際はXSSに注意:
import DOMPurify from 'dompurify'
const sanitizedHtml = DOMPurify.sanitize(htmlContent)
AIがKurocoサイトの登録からフロントエンドのビルド・デプロイまでを自動実行します。
詳細なワークフロー: references/ai-deployment.md を参照
/kuroco-api-content - API設計・認証パターン、コンテンツCRUD操作/kuroco-admin-api - 管理API(admin_api)の操作../kuroco-docs/docs/tutorials/integrate-kuroco-with-nuxt.md - Nuxt.js統合../kuroco-docs/docs/tutorials/integrate-login.md - ログイン実装../kuroco-docs/docs/tutorials/signup.md - 会員登録../kuroco-docs/docs/tutorials/beginners-guide.md - ビギナーズガイド../kuroco-docs/docs/tutorials/corporate-sample-site-to-ssg.md - SSG対応npx claudepluginhub diverta/kuroco-skills --plugin kuroco-skillsConfigures and works with Nuxt Studio, a self-hosted CMS for Nuxt Content sites. Covers auth providers, Git publishing, visual editing, media management, and AI content assistance.
Sets up Nuxt Studio module for visual content editing and CMS in Nuxt 3+ sites with @nuxt/content, covering installation, OAuth authentication (GitHub/GitLab/Google), Cloudflare subdomain deployment, and Monaco/TipTap editor config.
Integrates Sveltia CMS, lightweight Git-backed headless CMS for static sites (Hugo, Jekyll, 11ty, Gatsby, Astro, Next.js). Use for blogs, docs, i18n, OAuth/TOML/CORS errors.