ffsshhttiikk
ffsshhttiikk/opencode-agents-skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ffsshhttiikk/opencode-agents-skills --skill nextjs命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | nextjs |
| description | Next.js full-stack React framework with SSR, API routes, and file-based routing |
| license | MIT |
| compatibility | opencode |
| metadata | {"audience":"developers","category":"frameworks"} |
When building modern React applications with SSR, API routes, or full-stack capabilities.
// pages/index.tsx
import { GetServerSideProps } from 'next'
interface Props {
data: User[]
}
export const getServerSideProps: GetServerSideProps<Props> = async () => {
const res = await fetch('https://api.example.com/users')
const data = await res.json()
return {
props: { data },
}
}
export default function Home({ data }: Props) {
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
// app/page.tsx
import { getData } from '@/lib/data'
export default async function Page() {
const data = await getData()
return <main>{data.title}</main>
}
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/api/route.ts
import { NextResponse } from 'next/server'
export async function GET() {
return NextResponse.json({ message: 'Hello' })
}
// app/posts/[id]/page.tsx
interface Props {
params: { id: string }
}
export default async function Post({ params }: Props) {
const post = await fetchPost(params.id)
return <article>{post.content}</article>
}
export async function generateStaticParams() {
const posts = await fetchAllPosts()
return posts.map(post => ({ id: post.id }))
}
'use client'
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
)
}
// app/actions.ts
'use server'
export async function createUser(formData: FormData) {
const name = formData.get('name')
// Database operation
await db.user.create({ name: name as string })
revalidatePath('/users')
}