Server vs Client Components

// app/courses/page.jsx — Server Component (no directive needed)
import { courses } from '@/lib/courses'
import fs from 'node:fs'                 // ✅ Node APIs allowed on the server

export default async function Courses() {
  const note = fs.readFileSync('notice.txt', 'utf8')   // runs on server only
  return (
    <main>
      <p>{note}</p>
      {courses.map((c) => <h2 key={c.slug}>{c.title}</h2>)}
    </main>
  )
}

// components/LikeButton.jsx — Client Component
'use client'                              // must be the very first line
import { useState } from 'react'

export default function LikeButton() {
  const [likes, setLikes] = useState(0)
  return <button onClick={() => setLikes(likes + 1)}>👍 {likes}</button>
}

// app/courses/page.jsx (Server Component)
import { searchCourses } from '@/lib/courses'
import CourseCard from '@/components/CourseCard'   // server
import CourseSearch from './CourseSearch'          // client island

export default async function CoursesPage({ searchParams }) {
  const { q = '' } = await searchParams
  const list = searchCourses(q)                     // data on server
  return (
    <div className="container">
      <h1>All Courses</h1>
      <CourseSearch initial={q} />                  {/* only this ships JS */}
      <div className="grid">
        {list.map((c) => <CourseCard key={c.slug} course={c} />)}
      </div>
    </div>
  )
}

// components/Tabs.jsx  (client)
'use client'
import { useState } from 'react'
export default function Tabs({ first, second }) {
  const [tab, setTab] = useState(0)
  return (
    <div>
      <button onClick={() => setTab(0)}>Syllabus</button>
      <button onClick={() => setTab(1)}>Reviews</button>
      {tab === 0 ? first : second}
    </div>
  )
}

// app/courses/[slug]/page.jsx  (server)
<Tabs
  first={<Syllabus slug={slug} />}   // Server Components passed as props
  second={<Reviews slug={slug} />}   // they still render on the server
/>

// lib/db.js
import 'server-only'          // npm i server-only → build error if imported in client code
import mysql from 'mysql2/promise'
export const db = mysql.createPool({ password: process.env.DB_PASSWORD /* … */ })