コンテンツにスキップ

9

Next.js のインストール

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

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

これを行うには、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 ファイルに戻り、次のコードを削除できます。

  1. <html> および <body> タグ。
  2. id が app の <div> 要素。
  3. NPM でインストールした react および react-dom スクリプト。
  4. Next.js には JSX をブラウザが理解できる有効な JavaScript に変換するコンパイラがあるため、Babel スクリプト。
  5. <script type="text/jsx"> タグ。
  6. document.getElementById() および ReactDom.createRoot() メソッド。
  7. 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 で最初のページを作成する方法は次のとおりです。

  1. app という名前の新しいフォルダを作成し、index.js ファイルをその中に移動します。
  2. index.js ファイルを page.js に名前変更します。これがアプリケーションのメインページになります。
  3. 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点に気づくでしょう。

  1. 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 Components と Client Components の主な違いについて説明し、このエラーを修正します。

  1. 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 スクリプトを削除しました。これにより、複雑なツールや設定について考える必要がなくなったことがわかります。
  • 最初のページを作成しました。

追加情報

チャプターを完了しました。9

Next.js をインストールし、最初のアプリの構築準備が整いました。

次へ

10: Server Components と Client Components

Server Components と Client Components をいつ使用するかを学びます。

第 10 章を開始