Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// app/dashboard/page.tsx — Server Component (no directive needed)
import LikeButton from '@/components/LikeButton'; // Client Component
import { db } from '@/lib/db';

export default async function DashboardPage() {
  // Direct database access — safe because this runs on the server only
  const stats = await db.query('SELECT * FROM user_stats WHERE id = 1');

return (
    <section>
      <h1>Welcome back</h1>
      <p>Total posts: {stats.postCount}</p>
      {/* Pass data to Client Component as props */}
      <LikeButton initialCount={stats.likes} />
    </section>
  );
}

// components/LikeButton.tsx — Client Component
'use client';

import { useState } from 'react';

export default function LikeButton({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  const [liked, setLiked] = useState(false);

const handleLike = async () => {
    setLiked(true);
    setCount((c) => c + 1);
    await fetch('/api/like', { method: 'POST' });
  };

return (
    <button
      onClick={handleLike}
      disabled={liked}
      className="flex items-center gap-2"
    >
      {liked ? 'Liked' : 'Like'} ({count})
    </button>
  );
}