Next.js App Router 常見踩雷：Server / Client Component 怎麼切？

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  const post = await getPostBySlug(slug);

  return (
    <main>
      <h1>{post.title}</h1>
      <article>{post.content}</article>
    </main>
  );
}

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      Count: {count}
    </button>
  );
}

'use client';

export default function PostPage() {
  return (
    <main>
      <PostHeader />
      <PostContent />
      <LikeButton />
    </main>
  );
}

export default async function PostPage() {
  const post = await getPost();

  return (
    <main>
      <PostHeader title={post.title} />
      <PostContent content={post.content} />
      <LikeButton postId={post.id} />
    </main>
  );
}

'use client';

export function LikeButton({ postId }: { postId: string }) {
  return <button onClick={() => console.log(postId)}>Like</button>;
}

'use client';

export function PostCard({ post }: { post: Post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <button onClick={() => alert('saved')}>收藏</button>
    </article>
  );
}

export function PostCard({ post }: { post: Post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <SaveButton postId={post.id} />
    </article>
  );
}

'use client';

export function SaveButton({ postId }: { postId: string }) {
  return (
    <button onClick={() => alert(`saved: ${postId}`)}>
      收藏
    </button>
  );
}

'use client';

import { useEffect, useState } from 'react';

export default function PostsPage() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    fetch('/api/posts')
      .then((res) => res.json())
      .then(setPosts);
  }, []);

  return (
    <main>
      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </main>
  );
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <main>
      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </main>
  );
}

'use client';

const apiKey = process.env.SECRET_API_KEY;

export default async function DashboardPage() {
  const data = await getDashboardData();

  return <DashboardView data={data} />;
}

'use client';

export function DashboardView({ data }: { data: DashboardData }) {
  return <div>{data.title}</div>;
}

<ClientComponent onClick={handleClick} />

<ClientComponent postId={post.id} />

'use client';

export function ClientComponent({ postId }: { postId: string }) {
  function handleClick() {
    console.log(postId);
  }

  return <button onClick={handleClick}>Click</button>;
}

export default async function SettingsPage() {
  const profile = await getProfile();

  return (
    <main>
      <h1>設定</h1>
      <ProfileForm profile={profile} />
    </main>
  );
}

'use client';

export function ProfileForm({ profile }: { profile: Profile }) {
  return (
    <form>
      <input defaultValue={profile.name} />
      <button type="submit">儲存</button>
    </form>
  );
}

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  return (
    <main>
      <PostHeader title={post.title} publishedAt={post.publishedAt} />
      <PostContent content={post.content} />

      <div>
        <ShareButton title={post.title} />
        <FavoriteButton postId={post.id} />
      </div>
    </main>
  );
}

export default async function PostsPage({
  searchParams,
}: {
  searchParams: Promise<{
    keyword?: string;
    category?: string;
    page?: string;
  }>;
}) {
  const params = await searchParams;

  const posts = await getPosts({
    keyword: params.keyword,
    category: params.category,
    page: Number(params.page ?? 1),
  });

  return (
    <main>
      <PostSearchBar />
      <PostList posts={posts} />
    </main>
  );
}

'use client';

import { useRouter, useSearchParams } from 'next/navigation';

export function PostSearchBar() {
  const router = useRouter();
  const searchParams = useSearchParams();

  function handleSearch(keyword: string) {
    const params = new URLSearchParams(searchParams);

    if (keyword) {
      params.set('keyword', keyword);
    } else {
      params.delete('keyword');
    }

    router.push(`/posts?${params.toString()}`);
  }

  return (
    <input
      placeholder="搜尋文章"
      onChange={(event) => handleSearch(event.target.value)}
    />
  );
}

'use client';

import { useQuery } from '@tanstack/react-query';

export function NotificationList() {
  const { data, isLoading } = useQuery({
    queryKey: ['notifications'],
    queryFn: fetchNotifications,
  });

  if (isLoading) return <p>Loading...</p>;

  return (
    <ul>
      {data?.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

'use client';

import { useUiStore } from '@/stores/useUiStore';

export function MobileMenuButton() {
  const openMenu = useUiStore((state) => state.openMenu);

  return <button onClick={openMenu}>Menu</button>;
}