チャプター8

React から Next.js へ

これまでは、React を使い始める方法について説明しました。最終的なコードは次のようになりました。ここから始める場合は、このコードをコードエディターの index.html ファイルに貼り付けてください。

index.html

<html>
  <body>
    <div id="app"></div>
 
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <script type="text/jsx">
      const app = document.getElementById("app")
 
      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }
 
      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
 
        const [likes, setLikes] = React.useState(0)
 
        function handleClick() {
          setLikes(likes + 1)
        }
 
        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
 
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }
 
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

過去数章では、React の 3 つの重要な概念であるコンポーネント、プロップス、ステートについて紹介しました。これらをしっかりと理解することで、React アプリケーションの構築を開始するのに役立ちます。

React を学ぶ場合、学ぶための最良の方法は、実際に構築することです。<script> とこれまでに学んだ知識を使用して、既存の Web サイトに小さなコンポーネントを追加することで、React を徐々に導入できます。しかし、多くの開発者は、React が提供するユーザーエクスペリエンスと開発者エクスペリエンスが非常に価値があるため、React ですべてのフロントエンドアプリケーションを作成することを選択しています。

React から Next.js へ

React は UI の構築に優れていますが、その UI を完全に機能するスケーラブルなアプリケーションに独自に構築するには、ある程度の作業が必要です。また、サーバーコンポーネントやクライアントコンポーネントなど、フレームワークを必要とする新しい React の機能もあります。幸いなことに、Next.js はセットアップと構成の多くを処理し、React アプリケーションの構築に役立つ追加機能を備えています。

次に、React の例を Next.js に移行し、Next.js の仕組みについて説明し、サーバーコンポーネントとクライアントコンポーネントの違いを紹介します。

React から Next.js へ

React から Next.js へ

チャプター完了8