ゼロから学ぶ React, Next.js⑥【React Foundations】Chapter 9
公式チュートリアルはこちら
【Chapter 9】 Next.jsのインストール
Next.jsをプロジェクトで使用する場合、unpkg.comからreact
とreact-dom
のスクリプトを読み込む必要はありません。代わりに、npmまたは好みのパッケージマネージャを使用して、これらのパッケージをローカルにインストールできます。
インストールするには、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>
要素 - reactとreact-domのスクリプト(npmでインストールしたため)
- Next.jsにはJSXを有効なJavaScriptに変換するコンパイラが付属しているため、Babelのスクリプト
-
<script type="text/jsx">
タグ -
document.getElementById()
とReactDom.createRoot()
メソッド -
React.useState(0)
関数のReact.
部分
上記の行を削除した後、ファイルの先頭に次のimportを追加します。
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
に変更します。これがアプリケーションのメインページになります。 -
<HomePage>
コンポーネントにexport default
を追加して、Next.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要素(ナビゲーション、フッターなど)を追加するために使用できます。
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のスクリプトを削除しました。もはや考える必要のない複雑なツールと設定の一端を感じられたでしょう。
- 最初のページを作成しました。
追加の読み物
次の章
Discussion