📚 Full React & Next.js Guide

Everything you need to go from zero to pro

Cheatsheet, roadmap, project ideas, and the most common errors — all in one place.

React hooks

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

JSX essentials

Rendering lists

// Always add a key!
{items.map((item) => (
  <li key={item.id}>
    {item.name}
  </li>
))}

Conditional render

// With &&
{isLoggedIn && <Dashboard />}

// With ternary
{isLoggedIn
  ? <Dashboard />
  : <Login />}

Event handling

<button
  onClick={(e) => {
    e.preventDefault()
    handleClick()
  }}>
  Click me
</button>

Spread props

const props = {
  className: "btn",
  disabled: false
}

// Pass all at once
<Button {...props} />

Next.js essentials

App Router — pages

app/
  page.js        → /
  about/page.js  → /about
  blog/
    [slug]/
      page.js    → /blog/my-post

Server vs Client

// Server Component (default)
export default async function Page() {
  const data = await fetchData()
  return <div>{data}</div>
}

// Client Component
"use client"
export default function Button() { ... }

fetch with caching

// Static (default)
fetch(url)

// Always fresh
fetch(url, { cache: 'no-store' })

// Revalidate every 60s
fetch(url, { next: { revalidate: 60 } })

Metadata & SEO

export const metadata = {
  title: 'My page',
  description: 'About this page',
  openGraph: {
    title: 'My page',
    images: ['/og.png'],
  }
}

Created with ♥ by Silvicodes