📥

ゼロから学ぶ React, Next.js⑥【React Foundations】Chapter 9

2024/05/24に公開

Next.js

React

tech

公式チュートリアルはこちら

【Chapter 9】 Next.jsのインストール

Next.jsをプロジェクトで使用する場合、unpkg.comからreactとreact-domのスクリプトを読み込む必要はありません。代わりに、npmまたは好みのパッケージマネージャを使用して、これらのパッケージをローカルにインストールできます。

インストールするには、index.htmlファイルと同じディレクトリに、空のオブジェクト{}を含むpackage.jsonという新しいファイルを作成します。

package.json

+ {}

ターミナルで、プロジェクトのルートディレクトリで以下のコマンドを実行します。

npm install react@latest react-dom@latest next@latest

インストールが完了すると、package.jsonファイルの中にプロジェクトの依存関係がリストアップされているはずです。

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

上記のバージョンより新しいバージョンでも問題ありません。next、react、react-domのパッケージがインストールされていれば大丈夫です。

また、package-lock.jsonというファイルが新しく作成され、各パッケージの正確なバージョンに関する詳細な情報が含まれていることに気づくでしょう。

index.htmlファイルに戻って、以下のコードを削除します。

<html>と<body>タグ
idがappの<div>要素
reactとreact-domのスクリプト（npmでインストールしたため）
Next.jsにはJSXを有効なJavaScriptに変換するコンパイラが付属しているため、Babelのスクリプト
<script type="text/jsx">タグ
document.getElementById()とReactDom.createRoot()メソッド
React.useState(0)関数のReact.部分

上記の行を削除した後、ファイルの先頭に次のimportを追加します。

index.html

import { useState } from 'react';

コードは次のようになるはずです。

index.html

+ import { useState } from 'react';

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  const [likes, setLikes] = 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>
  );
}

HTMLファイルに残っているコードはJSXのみなので、ファイルの拡張子を.htmlから.jsまたは.jsxに変更できます。

最初のページの作成

Next.jsはファイルシステムルーティングを使用します。つまり、アプリケーションのルートをコードで定義する代わりに、フォルダとファイルを使用できます。

Next.jsで最初のページを作成する方法は次のとおりです。

appという新しいフォルダを作成し、index.jsファイルをその中に移動します。
index.jsファイルの名前をpage.jsに変更します。これがアプリケーションのメインページになります。
<HomePage>コンポーネントにexport defaultを追加して、Next.jsがどのコンポーネントをページのメインコンポーネントとしてレンダリングするかを識別できるようにします。

app/page.js

 import { useState } from 'react';

 function Header({ title }) {
   return <h1>{title ? title : 'Default title'}</h1>;
 }

+ export default function HomePage() {
  // ...
 }

開発サーバーの実行

次に、開発中に新しいページの変更を確認できるように、開発サーバーを実行しましょう。package.jsonファイルに"next dev"スクリプトを追加します。

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

ターミナルでnpm run devを実行して、何が起こるか確認してください。2つのことに気づくでしょう。

localhost:3000にアクセスすると、次のようなエラーが表示されます。

これは、Next.jsがReact Server Componentsを使用しているためです。React Server Componentsは、Reactをサーバー上でレンダリングできる新機能です。Server ComponentsはuseStateをサポートしていないため、代わりにClient Componentを使用する必要があります。

次の章では、Server ComponentsとClient Componentsの主な違いについて説明し、このエラーを修正します。
appフォルダの中にlayout.jsという新しいファイルが自動的に作成されました。これはアプリケーションのメインレイアウトです。すべてのページで共有されるUI要素（ナビゲーション、フッターなど）を追加するために使用できます。

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

まとめ

ここまでの移行を見ると、Next.jsを使用することの利点がすでにわかってきているかもしれません。

ReactとBabelのスクリプトを削除しました。もはや考える必要のない複雑なツールと設定の一端を感じられたでしょう。
最初のページを作成しました。