Next.js の使い方

2024/01/02

React を使用して複雑なアプリを作る場合、React だけでは機能不足感があります。そのため様々なパッケージを組み合わせて導入することになりますが、複雑度がどんどん上がっていってしまい、アプリ開発するのが大変になってしまったりします。そういった場合は、フレームワークの導入を検討してみるのも良いかもしれません。

Next.js とは？

最近の Web アプリでは、クライアントサイドをほぼ全て JavaScript だけで実装した形のアプリも存在しています。単一の HTML ページで処理を行う形から SPA（Single Page Application）などと呼ばれていたりします。 SPA は従来のサーバーでレンダリングを行う形のアプリケーションに比べると、サーバーとの通信が少なくなることから、UI の反応速度が速くなるというメリットがあり、一時期は人気となっていました。しかしその反面、初回の読み込みが遅くなってしまったり、SEO が弱く検索エンジンから低い評価を受けたりするなど、様々なデメリットも見えてきました。トータルのパフォーマンスを考えるのであれば、従来のサーバーサイドでのレンダリングも有効な手段であることから、 SPA の形も見直されるようになってきています。

Next.js は、React をベースとしたフルスタックの JavaScript フレームワークです。これまでの JavaScript ライブラリやフレームワークとの大きな違いとして、サーバーサイドでのレンダリング（SSR：Server Side Rendering）への対応があります。そのため Next.js には、サーバーとしての機能が含まれています。これはどういうことかといえば、サーバー上の Node.js で React を動かし、HTML を出力することができるということです。もちろんクライアントサイドでも React を動かします。そのため、サーバーとクライアントの両方で React が使えるようになります。

サーバーとクライアントの両方で React が使用できますので、PHP などの別のプログラム言語を勉強せずとも、 JavaScript（もしくは TypeScript）だけで UI の開発を行うことができるようになります。

	従来の Web アプリ	Next.js
サーバー	PHP + Laravel などで HTML を出力	Node.js + React で HTML を出力
クライアント	jQuery、Vue.js、React などで処理する	React で処理する

Next.js のインストール

さっそくですがインストールしていきましょう。 Next.js をインストールするには npm を使用します。設定を自動で行ってくれる自動インストールと、手動インストールの2種類があります。 npm の使い方がわからないという方は、まずは「Node.js と npm の使い方（その１：概要）」を参考にしてください。

自動でインストールする

自動インストールでは、必要なパッケージのインストールや、それらの設定ファイルの自動作成などを行ってくれます。また、TypeScript や ESLint、Tailwind CSS などの関連ツールのパッケージのインストールも自動で行ってくれますので便利です。それぞれのツールについてよくわからないという方は、まずは下記の記事を参考にしてみてください。

自動インストールを行うには、「create-next-app」パッケージを使用します。下記のコマンドを実行すると、どのような設定にするか質問されますので答えましょう。全て答え終わると Next.js がインストールされます。

npx create-next-app@latest

出力内容

√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes

手動でインストールする

手動インストールを行うには、下記のコマンドを実行します。 Next.js のパッケージである「next」パッケージと、 React のパッケージである「react」「react-dom」パッケージが必要になります。 Next.js を動作させるためにはサーバーが必要なため、--save-dev オプションは付けない方が良いかもしれません。手動インストールの場合は、関連ツールのインストールや設定ファイルの自動作成などは行われませんので注意してください。

npm install next@latest react@latest react-dom@latest

インストールできたか確認する

Next.js をインストールすると、next コマンドが使えるようになっています。下記のコマンドを実行してバージョン番号が表示されれば、ちゃんとインストールできています。

なお、コマンドは "./node_modules/.bin" にインストールされます。コマンドが見つからない場合は、"./node_modules/.bin" に PATH を通しておくか、相対パスで "./node_modules/.bin/eslint" と指定するか、もしくは npx コマンドを使用するなどの対応を行ってください。この記事では、説明の簡略化のために "./node_modules/.bin" に PATH を通してあることを前提として説明していきます。

next --version

ヘルプを表示する

next コマンドの詳しい使い方が知りたい場合は、ヘルプを表示してみましょう。

next --help

基本的な使い方

インストールできたので、さっそく使ってみましょう。 Next.js を使用して作成されたアプリを動作させるためには、サーバーサイドレンダリングなどを行う必要がありますので、サーバーを起動する必要があります。

開発環境用のサーバーを起動する

開発環境用のサーバーを起動するためには next dev コマンドを使用します。表示された URL にブラウザでアクセスすると、Next.js で作成されたアプリのページを表示することができます。「Ctrl + C」を押すと、サーバーを停止させることができます。

next dev

出力内容

   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

 ✓ Ready in 9.3s

ポート番号を変更する

Next.js のサーバーのデフォルトのポート番号は 3000 ですが、起動時のコマンドで --port オプションを使用すると、ポート番号を変更することができます。 --port オプションには、エイリアス（別名） -p オプションがあります。

例：ポート番号を 8080 に変更する場合

next dev -p 8080

本番環境用のサーバーを起動する

本番環境用のサーバーを起動するには、まず next build コマンドを使用して、ソースコードを最適化する必要があります。このコマンドを実行すると、ソースコードが minify されたり、画像の最適化が行われたり、本番環境用に最適化された状態にすることができます。

next build

本番環境用にソースコードを最適化できたら、本番環境用のサーバーを起動することができるようになります。先に最適化しておかないと、エラーが発生してサーバーを起動することができないので注意してください。本番環境用のサーバーを起動するには next start コマンドを使用します。ポート番号を変更したい場合は、next dev コマンドと同様に --port（または -p）オプションが使用できます。

next start

ESLint を使用する

自動インストールで ESLint をインストールした場合は、 next lint コマンドで ESLint が使用できます。 ESLint を使用するとソースコードの静的解析を行うことができます。 ESLint の使い方がわからないという方は、「ESLint の使い方」を参考にしてください。

next lint

アプリを作成する

開発環境用のサーバーを起動できたら、実際に Next.js を使用してアプリを作ってみましょう。

ディレクトリ構造

基本的なディレクトリ構造は下記のようになります。

パス	説明
app/	App Router 用のディレクトリ（後述）
pages/	Pages Router 用のディレクトリ（後述）
public/	画像などの静的ファイル置き場
src/	ソースコード置き場 ※ オプション（使用しなくても良い）
next.config.js	Next.js の設定ファイル

ルーティング

Next.js には、どんな URL がリクエストされたら、どのプログラムを実行するかという、ルーティングの機能が最初から組み込まれています。そのため、複数のページで構成されたアプリを簡単に作ることができます。

Next.js のルーティングは2種類あります。 Next.js のバージョン13から追加された機能豊富な App Router と、従来の Next.js で使用されていたシンプルな Pages Router です。基本的には新しい App Router の方が推奨されていますが、Pages Router だけを使用したり、 App Router と Pages Router を同時に使用したりすることも可能です。

ファイルの拡張子

1つのページは、1つの React のコンポーネントとして記述することができます。ファイルの拡張子は ".js"、".jsx"、".tsx" のいずれかが使用できます。

この記事では説明の簡略化のために、拡張子は ".js" を使用して説明していきます。

App Router

App Router は "app" ディレクトリ配下に適用されます。 "app" ディレクトリの中では、その中のディレクトリの1つ1つが、1つの URL を表すようになります。そして、そのディレクトリの中の "page.js" という名前のファイルが、そのページの本体となります。例えば、リクエストされた URL が "/hoge/fuga" であれば、 "/app/hoge/fuga/page.js" ファイルが実行されることになります。

URL	実行されるファイル（拡張子が ".js" の場合）
/	/app/page.js
/hoge	/app/hoge/page.js
/hoge/fuga	/app/hoge/fuga/page.js

特別なファイル

また、App Router では、"page.js" ファイルと同じディレクトリに、特別なファイルを配置すると、そのページの動作を細かく変更することができます。例えば、"page.js" と同じディレクトリに "layout.js" という名前のファイルを配置すると、そのディレクトリ配下の全てのページにレイアウトが自動で適用されるようになります。なお、一番上のディレクトリのレイアウト（ルートレイアウト）ファイルである "/app/layout.js" は必須となりますので注意してください。

/app/layout.js

export default function RootLayout({children}) {
	return (
		<html lang="ja">
			<body>
				<header>
					This is layout header
				</header>
				<main>
					{children}
				</main>
				<footer>
					This is layout footer
				</footer>
			</body>
		</html>
	)
}

/app/page.js

export default function IndexPage() {
	return (
		<div>
			This file is /app/page.js;
		</div>
	)
}

こういった特別なファイルを配置することによってページの動作を変更する機能は App Router だけの機能です。レイアウトファイル以外にもさまざまな機能がありますので、詳しい説明は公式のドキュメントを参照してください。

Pages Router

Pages Router は、"pages" ディレクトリ配下に適用されます。 "pages" ディレクトリの中では、その中の構造がそのまま URL を表すようになります。例えば、リクエストされた URL が "/hoge/fuga" であれば、 "/pages/hoge/fuga.js" ファイル、もしくは "/pages/hoge/fuga/index.js" ファイルが実行されることになります。

Pages Router はシンプルでわかりやすい構造をしていますが、その分、App Router にあったような特別なファイルを配置してページの動作を変更するといった機能はありません。例えば、ページにレイアウトを適用したいのであれば、自分で実装する必要があります。

URL	実行されるファイル（拡張子が ".js" の場合）
/	/pages/index.js
/hoge	/pages/hoge.js もしくは /pages/hoge/index.js
/hoge/fuga	/pages/hoge/fuga.js もしくは /pages/hoge/fuga/index.js

URL の末尾のスラッシュ

Next.js では、URL の最後に "/" を付けてリクエストすると、デフォルトで最後の "/" を取り除いた URL にリダイレクトされるようになっています。例えば、"/hoge/fuga/" にリクエストすると、"/hoge/fuga" にリダイレクトされます。この動作は Next.js の設定ファイルで変更することができます。なお、リダイレクトはブラウザにキャッシュされている可能性があるので、設定を変更しても動作が変わらない場合は、ブラウザのキャッシュをクリアしてみてください。

常に末尾のスラッシュを付ける

デフォルトの動作とは逆に、常に末尾のスラッシュが付いたURLにリダイレクトさせるようにするには、 Next.js の設定ファイルで、trailingSlash を true に設定します。

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
	trailingSlash: true,
}

module.exports = nextConfig

リダイレクトさせない

末尾のスラッシュが付いているかどうかにかかわらずリダイレクトさせたくない場合は、 Next.js の設定ファイルで、skipTrailingSlashRedirect を true に設定します。

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
	skipTrailingSlashRedirect: true,
}

module.exports = nextConfig

2種類のコンポーネント

Next.js を使用したアプリの開発では、サーバーとクライアントの両方を意識しなければなりません。 React のコンポーネントも2種類あります。サーバーサイドでレンダリングするためのコンポーネントと、クライアントサイドでレンダリングするためのコンポーネントです。書き方に大きな違いがあるわけではありませんが、役割やできることは異なります。

サーバーコンポーネント

サーバーサイドでレンダリングするためのコンポーネントです。サーバーで動作するコンポーネントですので、クライアントで動作する処理は記述することができません。例えば、useState() を使用した状態管理や、イベントリスナーの登録、ブラウザの API（ストレージ API や位置情報 API など）は使用することができません。デフォルトはサーバーコンポーネントになります。

クライアントコンポーネント

クライアントサイドでレンダリングするためのコンポーネントです。クライアントサイドでしか動作しない機能を使用することができます。例えば、useState() を使用した状態管理や、イベントリスナーの登録、ブラウザの API（ストレージ API や位置情報 API など）を使用したりすることができます。これまで React でアプリを開発されたことがある方は、それとほぼ同じ使い方だと思ってもらって構いません。クライアントサイドでレンダリングするためのコンポーネントですが、サーバーサイドレンダリング時にも初期状態をレンダリングするために使用されたりします。

クライアントコンポーネントを使用する場合は、ファイルの先頭に "use client" と記述する必要があります。

'use client';

import { useState } from 'react';

export default function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
		</div>
	);
}

静的なサイトとして出力する

ここまでの説明で Next.js を使用して作成されたアプリを動作させるためには、サーバーサイドレンダリングなどを行う必要があるので、サーバーを起動する必要があるのだと記述してきました。サーバーサイドレンダリングを行うことができるというのが Next.js を使用することのメリットの1つです。しかしながら、作成するアプリによってはサーバーサイドレンダリングなど不要で、全てクライアントサイドレンダリングで問題ないアプリというのも存在するかと思います。例えば、従来の SPA がそれにあたります。また、Next.js が動作するサーバーを用意することが難しい場合もあるかもしれません。サーバーの構築作業にあまり詳しくなかったり、レンタルサーバーを使用している場合などです。そういった場合は、Next.js で作成したアプリを、静的なサイトとして出力（SSG：Static Site Generation）することができます。静的なサイトとして出力すれば、サーバー上で Next.js を動作させる必要が無くなりますので、普通の Web サーバーで動作させることができるようになります。

静的なサイトとして出力するには、まず Next.js の設定ファイルで output を 'export' に設定します。

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
	output: 'export',
}

module.exports = nextConfig

次に、next build コマンドを実行します。すると、"out" ディレクトリに静的サイトとして出力されます。出力された "out" ディレクトリの中身を、丸ごと Web サーバーのドキュメントルートに配置すると静的サイトとして動作させることができます。

next build

npm-scripts に登録する

next コマンドですが、各種オプションなどを毎回入力するのは面倒に感じてくると思います。そこで、よく使うコマンドを npm-scripts に登録しておくと、入力の手間が少なくなって便利です。自動インストールをした場合は、いくつかのコマンドが npm-scripts に自動で登録されますので、そのまま使用しても良いでしょう。

npm-scripts では、"./node_modules/.bin" に PATH が通っているので、"./node_modules/.bin" を入力したり、npx コマンドを使用したりする必要はありません。 npm-scripts の使い方がわからないという方は、「Node.js と npm の使い方（その３：npm-scripts）」を参考にしてください。

npm-scripts に登録

package.json

{
	"name": "my-app",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"react": "^18",
		"react-dom": "^18",
		"next": "14.0.4"
	},
	"devDependencies": {
		"typescript": "^5",
		"@types/node": "^20",
		"@types/react": "^18",
		"@types/react-dom": "^18",
		"autoprefixer": "^10.0.1",
		"postcss": "^8",
		"tailwindcss": "^3.3.0",
		"eslint": "^8",
		"eslint-config-next": "14.0.4"
	}
}

npm-scripts を実行する

npm run dev

オプションを追加したい場合は、-- で繋ぐと追加できます。

npm run dev -- -p 8080

Next.js の使い方

Next.js とは？

Next.js のインストール

自動でインストールする

手動でインストールする

インストールできたか確認する

ヘルプを表示する

基本的な使い方

開発環境用のサーバーを起動する

ポート番号を変更する

本番環境用のサーバーを起動する

ESLint を使用する

アプリを作成する

ディレクトリ構造

ルーティング

ファイルの拡張子

App Router

特別なファイル

Pages Router

URL の末尾のスラッシュ

常に末尾のスラッシュを付ける

リダイレクトさせない

2種類のコンポーネント

サーバーコンポーネント

クライアントコンポーネント

静的なサイトとして出力する

npm-scripts に登録する

npm-scripts に登録

npm-scripts を実行する

参考サイト

関連記事

React の使い方

TypeScript の使い方

Tailwind CSS の使い方

ESLint の使い方

Node.js と npm の使い方（その１：概要）

記事検索

最新記事

人気記事

RSSフィード

お知らせ

フィードバック