React 基礎: Next.jsのインストール

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

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

これを行うには、index.htmlファイルと同じディレクトリにpackage.jsonという新しいファイルを作成し、空のオブジェクト{}を記述します。

package.json

{}

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

Terminal

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に名前変更します。これがアプリケーションのメインページになります。
<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エラーメッセージ: useStateが必要なコンポーネントをインポートしています。これはクライアントコンポーネントでのみ機能します...

これは、Next.jsがReactサーバーコンポーネントを使用しているためです。サーバーコンポーネントはuseStateをサポートしていないため、代わりにクライアントコンポーネントを使用する必要があります。

次の章では、サーバーコンポーネントとクライアントコンポーネントの主な違いについて説明し、このエラーを修正します。

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のインストール

最初のページを作成

開発サーバーの実行

まとめ

On this page