9
チャプター9
Next.js のインストール
プロジェクトで Next.js を使用する場合、unpkg.com から react と react-dom のスクリプトを読み込む必要はもうありません。代わりに、npm または任意のパッケージマネージャーを使用して、これらのパッケージをローカルにインストールできます。
注: Next.js を使用するには、マシンに Node.js バージョン 18.17.0 以上がインストールされている必要があります（最小バージョン要件を参照）。ここからダウンロードできます。
そのためには、index.html ファイルと同じディレクトリに、空のオブジェクト {} を含む package.json という名前の新しいファイルを作成します。
{}ターミナルで、プロジェクトのルートディレクトリで次のコマンドを実行します。
npm install react@latest react-dom@latest next@latestインストールが完了すると、`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.` 部分
上記の行を削除した後、ファイルの先頭に次のインポートを追加します。
import { useState } from 'react';コードは次のようになります。
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` を追加します。
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
// ...
}開発サーバーを実行する
次に、開発中に新しいページの変更を確認できるように、開発サーバーを実行しましょう。`package.json` ファイルに ` "next dev"` スクリプトを追加します。
{
"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 がサーバー上でレンダリングできるようにする新しい機能である React サーバーコンポーネントを使用しているためです。サーバーコンポーネントは `useState` をサポートしていないため、代わりにクライアントコンポーネントを使用する必要があります。
次の章では、サーバーコンポーネントとクライアントコンポーネントの主な違いについて説明し、このエラーを修正します。
- `layout.js` という新しいファイルが `app` フォルダ内に自動的に作成されました。これは、アプリケーションのメインレイアウトです。これを使用して、すべてのページで共有される UI 要素（例：ナビゲーション、フッターなど）を追加できます。
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 をインストールし、最初のアプリの構築を開始する準備ができました。
これは役に立ちましたか？