まとめ: サーバーとクライアント
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 22/47。
チャレンジ
中級章のまとめ: サーバーとクライアントの境界線を自分で引きましょう。
ページはサーバー上で料理（dishes）を一覧表示しますが、ボタンに直接 onClick を配置しているため、アプリがまったくレンダリングされません。ページをクライアントコンポーネントとしてマークすることなく、これを修正してください:
components/OpenHours.jsxに、state でopenブーリアンを保持し、id="toggle"を持つボタンをレンダリングするクライアントコンポーネント（1行目に'use client'）を構築します。そのテキストは、閉じているときはShow hours、開いているときはHide hoursである必要があります。- 開いているときは、
id="hours"とOpen 9am-5pmというテキストを持つ<p>もレンダリングします。閉じているときは、その段落が存在してはいけません。 app/page.jsxで、壊れているボタンと常に表示されている段落を'../components/OpenHours'からインポートした<OpenHours />に置き換えます。見出しと料理のリスト（dish list）はそのまま残し、ページはサーバーコンポーネントのままにします。
自分で試してみよう
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}