第４回の今回はNext.jsの内容に入り、Next.jsについてと、複数ページを表示する際のルーティングをメインにNext.jsの基礎を解説します。
記事見出し一覧
-
第１回【React】：React入門 — コンポーネントとJSXの基本
- Reactとは何か、コンポーネントについて学ぶ
-
第２回【React】：フック入門 — useState と useEffect
- useState と useEffectというReactの関数を学ぶ
-
第３回【React】：コンポーネント間で値を共有する方法
- 複数のコンポーネントを作ったときの値の共有方法を学ぶ
-
第４回【Next.js】：Next.jsの基本
- Next.jsとは、ルーティングについて学ぶ
-
第５回【Next.js】：（補足）サーバーコンポーネントとクライアントコンポーネント
- サーバーコンポーネントとクライアントコンポーネントについて学ぶ
第４回：Next.jsの基本
Next.js（app router）とは
Reactでは単独ページを作っていましたが、Next.jsを使うとReactをベースとして、ルーティン機能があるため、複数ページを作成することができるフレームワークになります。
Next.jsの主な機能：
- ルーティング機能：複数ページを簡単に作成できる
- レイアウト機能：ヘッダー・フッターなど共通部分を簡単に設定できる
App Router（ルーティング）
appディレクトリの配下に表示するページを階層構造でディレクトリやファイルを置いていく。
階層と同じURLでアクセスできるようになる。
URLに相当するディレクトリを作り、その中にpage.jsxを作成するという流れになる。
app/
├── page.jsx → http://localhost:3000/
├── layout.jsx → 全ページ共通のレイアウト
├── about/
│ └── page.jsx → http://localhost:3000/about
└── products/
├── page.jsx → http://localhost:3000/products
└── [id]/
└── page.jsx → http://localhost:3000/products/123
Next.jsプロジェクトの作成
Reactの時と同様CodeSandboxを使うのが楽でよい
（方法１）CodeSandboxを使う
右上の「+ CREATE」ボタンを押した後
Next.jsを選択すればプロジェクトが完成。
（方法２）create-next-appを使う
公式ページを参考にコマンドで作成
npx create-next-app@latest my-app
App Router → Yes
で答える。それ以外は何でもいい。
appディレクトリ構造の基本
page.jsx → 表示ページ
// app/page.jsx もっともルートにあるページコンポーネント
export default function Home() {
return (
<div>
<h1>jsxの基本形</h1>
<p>このファイルをディレクトリごとに配置する</p>
</div>
);
}
layout.jsx → 共通レイアウト
レイアウト用ファイル
例えば共通ヘッダーやフッターを定義すると、layout.jsx内にpage.jsxが表示される形で表示される。
// app/layout.jsx
export default function RootLayout({ children }) {
return (
<html lang="ja">
<body>
<header>
<p>ヘッダー</p>
<nav>
<a href="/">ホーム</a>
<a href="/about">概要</a>
</nav>
</header>
<main>{children}</main>
<footer>
<p>フッター</p>
</footer>
</body>
</html>
);
}
{children}の部分に、page.jsxの内容が表示されます。
layout.jsxの適用範囲
layout.jsxは複数定義でき、app配下であれば全画面に適応され、
各ディレクトリに配置したlayout.jsxは、そのディレクトリ配下のページにのみ適用されます。
app/
├── layout.jsx → 全ページ共通
├── page.jsx
└── dashboard/
├── layout.jsx → /dashboard配下のページのみ
├── page.jsx
└── settings/
└── page.jsx
上記の例ではapp/dashboard/setting/page.jsxのファイルは
- app/layout.jsx のレイアウトの中の
* app/dashboard/layout.jsx の中に
* app/dashboard/setting/page.jsx が表示される
という入れ子構造になります。
ルーティング
フォルダ = ルート
フォルダ名がそのままURLになります。
app/about/page.jsx
app/blog/page.jsx
app/blog/first/page.jsx
アクセス例：
動的ルート [id]
ブログ記事の詳細ページなど、IDによってページが変わる場合に使います。
app/products/[id]/page.jsx
アクセス例：
コンポーネント例：（動的なidを取得）
// app/products/[id]/page.jsx
export default async function ProductDetail({ params }) {
const { id } = await params;
return (
<div>
<h1>商品ID: {id}</h1>
</div>
);
}
ナビゲーション
Link コンポーネント（next/link）
ページ間のリンクを作成するコンポーネントです。
通常、HTMLではaタグを使ってリンクを作成しますが、
Next.jsでは<Link>を使うと以下のようなメリットがあります。
通常の<a>タグとの違い：
-
<a>タグ：ページ全体を再読み込みする（遅い） -
<Link>：変更が必要な部分だけを再描画する（速い）- 例：共通ヘッダーなど変更がない部分は再描画されない
プリフェッチ機能：
- 画面に表示されたリンクを自動で事前読み込み
- リンククリック時の表示が高速になる
import Link from 'next/link';
// Next.jsではLinkを使う
<Link href="/about">Nextアプリ内の別ページへ</Link>
// 通常のaタグは外部サイトへのリンクのみに使う
<a href="https://example.com">外部サイト</a>
実際のコード例
このコード例では、これまで説明したNext.jsのルーティング機能を実際に動かせます。
実装されている機能：
- 通常のルーティング（
/about、/blogなど） - 動的ルート
[id]を使ったルーティング（/products/1、/products/2など） -
Linkコンポーネントを使ったページ間のナビゲーション
実際にリンクをクリックして、URLがどう変わるか、ページがどう切り替わるかを確認してみてください。
次回
ここまでの内容ですでにアプリは作れるかと思います。
Next.jsについてはルーティングについて知っていれば少なくともToDoアプリは作れました。
ただし、Next.jsを使うにあたり知っておいたほうが良いと思った内容があるため
サーバーコンポーネントとクライアントコンポーネントについて学びます。
第５回へ