章9

Next.jsのインストール

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

注: Next.jsを使用するには、Node.jsバージョン18.17.0以上がマシンにインストールされている必要があります（最小バージョン要件を参照）。Node.jsはこちらからダウンロードできます。

そのためには、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>要素。
NPMでインストールしたため、reactおよびreact-domスクリプト。
Next.jsにはJSXをブラウザが理解できる有効なJavaScriptに変換するコンパイラがあるため、Babelスクリプト。
<script type="text/jsx">タグ。
document.getElementById()およびReactDom.createRoot()メソッド。
React.useState(0)関数のReact.部分。

上記の行を削除したら、ファイルの先頭に以下のインポートを追加します。

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に名前変更します。これがアプリケーションのメインページになります。
Next.jsがページの主要コンポーネントとしてどのコンポーネントをレンダリングするかを区別できるように、<HomePage>コンポーネントにexport defaultを追加します。

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 Error Message: You're importing a component that needs useState. It only works in a Client component...

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

次の章では、Server ComponentとClient Componentの主な違いについて説明し、このエラーを修正します。

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のスクリプトを削除しました。これは、もはや考える必要のない複雑なツールと設定の一端です。
最初のページを作成しました。

追加の読書

Next.jsルーティングの基礎

ルートの定義

ページとレイアウト

Next.jsのインストール

最初のページを作成する

開発サーバーを実行する

まとめ

章を完了しました9