react-nextjs-expert
4
总安装量
4
周安装量
#53620
全站排名
安装命令
npx skills add https://github.com/ship-studio/saul-goodman-lawyer-template --skill react-nextjs-expert
Agent 安装分布
gemini-cli
4
antigravity
4
claude-code
4
amp
4
github-copilot
4
codex
4
Skill 文档
React & Next.js Expert
Expert guidance for Next.js 14+ with App Router. This project uses React Server Components by default.
File-Based Routing
app/
âââ page.tsx â yoursite.com
âââ about/page.tsx â yoursite.com/about
âââ blog/[slug]/page.tsx â yoursite.com/blog/any-post
âââ layout.tsx â Wraps all pages (navigation, footer)
âââ globals.css â Global styles + Tailwind
Server vs Client Components
Server Components (default) – Run on server, can’t use hooks or browser APIs:
// app/page.tsx - Server Component by default
export default function Home() {
return <h1>Hello</h1> // Renders on server
}
Client Components – Add 'use client' for interactivity:
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
When to Use Client Components
Add 'use client' only when you need:
useState,useEffect, or other hooks- Event handlers (
onClick,onChange, etc.) - Browser APIs (
window,localStorage) - Third-party libraries that use hooks
Component Patterns
Page component:
export default function AboutPage() {
return (
<main className="min-h-screen p-8">
<h1 className="text-4xl font-bold">About Us</h1>
<p className="mt-4 text-gray-600">Our story...</p>
</main>
)
}
Reusable component:
// components/Button.tsx
interface ButtonProps {
children: React.ReactNode
variant?: 'primary' | 'secondary'
onClick?: () => void
}
export function Button({ children, variant = 'primary', onClick }: ButtonProps) {
const styles = variant === 'primary'
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-800'
return (
<button className={`px-4 py-2 rounded ${styles}`} onClick={onClick}>
{children}
</button>
)
}
Layout Pattern
// app/layout.tsx
import './globals.css'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<nav className="p-4 bg-gray-100">
<a href="/">Home</a>
<a href="/about" className="ml-4">About</a>
</nav>
{children}
<footer className="p-4 bg-gray-100 mt-8">
© 2024 My Site
</footer>
</body>
</html>
)
}
Tailwind CSS
Use Tailwind classes for all styling. Never create separate CSS files.
Common patterns:
// Spacing: p-4, m-2, px-6, py-3, mt-8, mb-4
// Text: text-xl, font-bold, text-gray-600, text-center
// Layout: flex, grid, items-center, justify-between
// Sizing: w-full, h-screen, max-w-4xl, min-h-screen
// Colors: bg-blue-600, text-white, border-gray-300
// Responsive: md:flex-row, lg:text-xl, sm:p-4
Images
import Image from 'next/image'
<Image
src="/logo.png" // From public folder
alt="Company Logo"
width={200}
height={100}
/>
Links
import Link from 'next/link'
<Link href="/about" className="text-blue-600 hover:underline">
About Us
</Link>
Common Mistakes to Avoid
- Don’t create .html files – This is React, use .tsx
- Don’t use
<script>tags – Use React patterns - Don’t create .css files – Use Tailwind classes
- Don’t forget
'use client'– Add it when using hooks - Don’t nest layouts incorrectly – One layout.tsx per route segment