Gyakori hibák

// ❌ Rossz – az egész oldal Client Component, feleslegesen
'use client'

export default function ProductPage() {
  const [products, setProducts] = useState([])
  useEffect(() => { fetchProducts().then(setProducts) }, [])
  return <ProductList products={products} />
}

// ✅ Helyes – Server Component, közvetlen adatlekérés
export default async function ProductPage() {
  const products = await fetchProducts()
  return <ProductList products={products} />
}

// ❌ Rossz – TypeScript error és runtime bug Next.js 16-ban
export default async function Page({ params }) {
  const { slug } = params  // params nem awaited!
  // ...
}

// ✅ Helyes
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // ...
}

// ❌ Rossz – fetchUser kétszer hívódik, két hálózati kérés
async function Header() {
  const user = await fetchUser()  // kérés #1
}

async function Sidebar() {
  const user = await fetchUser()  // kérés #2
}

// ✅ Helyes – React deduplikálja, csak egy kérés megy ki
// Ugyanolyan URL és opciók esetén automatikus deduplication

// ❌ Rossz – Server Componentben nem lehet useState
export default async function Page() {
  const [count, setCount] = useState(0) // Error!
  // ...
}

// ✅ Helyes – state csak Client Componentben
'use client'
export function Counter() {
  const [count, setCount] = useState(0)
  // ...
}

// ❌ Veszélyes – titkos API kulcs kerül a kliensre!
'use client'
export function ApiCall() {
  fetch('https://api.example.com', {
    headers: { 'Authorization': process.env.SECRET_API_KEY } // undefined kliens oldalon
  })
}

// ✅ Helyes – titkos adat csak szerveren
export async function ServerApiCall() {
  fetch('https://api.example.com', {
    headers: { 'Authorization': process.env.SECRET_API_KEY } // biztonságos
  })
}

// ❌ Rossz – nincs loading state, a felhasználó üres képernyőt lát
// app/slow-page/page.tsx
export default async function SlowPage() {
  const data = await verySlowFetch() // 3 másodperc
  return <DataView data={data} />
}

// ✅ Helyes – hozzáadni egy loading.tsx-t
// app/slow-page/loading.tsx
export default function Loading() {
  return <Skeleton />
}

// ❌ Rossz – router.push Server Actionből nem működik
'use server'
export async function submitForm() {
  const router = useRouter() // Error! Hook nem használható Server Actionben
  router.push('/success')
}

// ✅ Helyes – redirect() szerver oldalon
'use server'
import { redirect } from 'next/navigation'
export async function submitForm() {
  await processForm()
  redirect('/success')
}