More than 1 year has passed since last update.

React + TypeScript: Next入門01 チュートリアルの作例を一からつくってみる

Last updated at 2023-11-11Posted at 2023-01-24

Next.jsの公式サイトにはチュートリアル解説があります。その作例https://next-learn-starter.vercel.appをTypeScriptも加え、一からつくってみようというのがこのチュートリアルシリーズの目的です。

Next.js公式チュートリアルは、なかばでき上がったプロジェクトのコピーにコードを書き加えるかたちで進められます。手っ取り早いものの、Next.jsを使った開発の流れがよくわかりません。また、TypeScriptについては、完成したJavaScriptの作例にあとから型づけを与える説明です(next-learn/basics/typescript-final/)。

本チュートリアルシリーズは、プロジェクトにはじめからTypeScriptを加えます。そのうえで、一から公式作例と同じアプリケーションをつくってみましょう。

React + TypeScript + Nextのひな形プロジェクトをつくる

Create Next AppでTypeScriptプロジェクトをつくるのがつぎのコマンドです。--tsフラグがTypeScriptを指します。

npx create-next-app@latest --ts

プロジェクト名(ここではreact-typescript-next-example)を含め、つづいて示される質問に答えてください。つぎの例では、ESLintも加えました。

✔ What is your project named? … react-typescript-next-example
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use src/ directory with this project? … No / Yes
✔ Would you like to use experimental app/ directory with this project? … No / Yes

プロジェクトのディレクトリに切り替えたあと、npm run devコマンドを入力すればひな形プロジェクトのページがローカルサーバーhttp://localhost:3000で開きます(図001)。

図001■ローカルサーバーで開いたひな形プロジェクト

トップページを書き替える

まずは、アプリケーションのトップページを書き替えましょう。モジュールはpages/index.tsxです。関数コンポーネントHomeは、つぎのように改めてください。

pages/index.tsx

export default function Home() {
	return (
		<>
			<section>
				<h1>
				Learn <a href="https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website">Next.js!</a>
				</h1>
				<p>Get started by editing <code>pages/index.js</code></p>
			</section>
		</>
	);
}

そして、アプリケーション全体に適用されるグローバルなCSSがstyles/globals.cssです。ひな形プロジェクトのCSSの定めは使いません。公開されている作例のGitHubコードnext-learn/basics/typescript-final/styles/global.cssで上書きしてください。トップページはつぎの図002のように改められたはずです。

図002■書き替えられたトップページ

ページを加える

さらに、ページを加えましょう。Next.jsでは、ページはpagesディレクトリに、Reactコンポーネントで加えます。ディレクトリpagesに加えたpostsに、つぎのモジュールpages/posts/first-post.tsxを定めてください。

pages/posts/first-post.tsx

import type { FC } from 'react';

const FirstPost: FC = () => {
	return <h1>First Post</h1>;
};
export default FirstPost;

ページのルートは、Reactコンポーネントモジュールの名前によって決まります。たとえば、つぎのとおりです。

pages/index.tsxのルート: /
pages/posts/first-post.tsxのルート: /posts/first-post

コンポーネントの名前は、自由に定められます。ただし、必ずdefaultでexportしなければなりません(「Create a New Page」)。http://localhost:3000/posts/first-postを開けば、新たに加えたページが表示されるでしょう(図003)。

図003■新たに加えたページ

`Link`コンポーネントを使う

Next.jsでアプリケーション内のページ遷移を制御するのがLinkコンポーネントです(「<Link>」参照)。コンポーネントをimportしたら、<a>要素と同じく、リンク先はhrefプロパティに定めてください(他のプロパティについては「Props」参照)。モジュールpages/index.tsxの<h1>要素はつぎのように書き替えます(図004)。

pages/index.tsx

import Link from 'next/link';

export default function Home() {
	return (
		<>
			<section>
				<h1>
					{/* Learn <a href="https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website">Next.js!</a> */}
					Read <Link href="/posts/first-post">this page!</Link>
				</h1>
				{/* <p>Get started by editing <code>pages/index.js</code></p> */}
			</section>
		</>
	);
}

図004■トップページのリンクを`Link`コンポーネントで書き替えた

なお、Next.js 12.2になるまでは、Linkコンポーネントは<a>要素を包む必要がありました。けれど、もはや<a>要素は要りません(「React + Next.js: Linkコンポーネントで<a>要素を包んだらサーバーエラーになった」参照)。

遷移先のpages/posts/first-post.tsxからトップページに戻るためのリンクも、つぎのようにLinkコンポーネントで加えましょう(図005)。

pages/posts/first-post.tsx

import Link from 'next/link';

const FirstPost: FC = () => {
	// return <h1>First Post</h1>;
	return (
		<>
			<h1>First Post</h1>
			<h2>
				<Link href="/">← Back to home</Link>
			</h2>
		</>
	);
};

図005■遷移先ページにトップへ戻るリンクを追加

クライアントサイドナビゲーション

同じNext.jsアプリケーション内でページ遷移するとき働くのが「クライアントサイドナビゲーション」(Client-Side Navigation)です。ページが変わるとき、クライアント側のJavaScriptが用いられます。そのため、ブラウザからサーバーにリクエストを送るデフォルトの切り替えより、処理が速められるのです(「nextjs with typescript:04 クライアントサイドナビゲーション、Linkタグ」参照)。

試しに、トップページで[デベロッパーツール]を使って、<body>要素の背景色(background)を黄色(yellow)に変えてみましょう(図006)。そのうえで、ページを遷移してください。切り替えたページでも、背景は黄色のままのはずです。クライアントサイドナビゲーションにより、ブラウザはページ全体のリロードはしません。

図006■[デベロッパーツール]でトップページの`<body>`要素の背景色を変える

なお、Linkコンポーネントでなく<a>要素でリンクした場合、ページ遷移はデフォルトに戻り、ブラウザがページ全体を更新することにお気をつけください。

また、Next.jsはコードを自動的に分割します。それぞれのページごとに、必要なコードしかロードはされません。たくさんのページで構成されたサイトであっても、各ページは素早く読み込まれます。ロードされるのはそのページに必要なコードだけですから、エラーを生じたページがあっても他に影響は与えないのです。

さらに、プロダクションビルドでは、Next.jsはLinkコンポーネントがピューポートに入ると、自動的にリンク先ページのコードをバックグラウンドで先読みします。リンクをクリックしたときには、そのページに直ちに移れるでしょう。

ここまでのコードを掲げたのがつぎのソース01です。

ソース01■Next入門01 チュートリアルの作例を一からつくってみる

本稿では、Next.jsの基本的な操作について解説しました。次回からは、Next.js公式作例にコードを近づけてゆきます。

React + TypeScript: Next入門シリーズ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up