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