Next.js入門（TypeScript版）

Posted: 2021.08.09 / Category: javascript / Tag: Next.js, React

React.jsのフレームワークであるNext.jsを使ってみたので、さらっとメモ。

プロジェクトの作成

プロジェクトを作成するディレクトリで下記を実行。
npmの場合はyarnをnpxに置き換えてください。

$ yarn create next-app --typescript

プロジェクト名を聞かれるので入力してエンター。

? What is your project named? › my-app

新しいディレクトリが作られているのでカレントにしましょう。

$ cd my-app

これで準備完了

下記を実行することでローカルサーバーが起動します。

$ yarn dev

ブラウザでhttp://localhost:3000にアクセスして「Welcome to Next.js!」が表示されることを確認してください。

ページの編集

最初に表示されたページを編集してみましょう。
pages/index.tsxを下記のようにしてみましょう。

pages/index.tsx

import Head from 'next/head'

export default function Home() {
	return (
		<div>
			<Head>
				<title>ホームページタイトル</title>
				<meta name="description" content="ホームページ概要" />
			</Head>
			<h1>ホームページタイトル</h1>
		</div>
	)
}

こんなところにって感じですが、Headで囲むことで、ページのheadタグ内の要素を追加することができます。

ブラウザを更新して内容が変わっているこをと確認してください。

ページの追加

新しくページを追加してみましょう。
先ほどのindex.tsxと同階層にabout.tsxというファイルを作成します。

pages/about.tsx

import Head from 'next/head'

export default function About() {
	return (
		<div>
			<Head>
				<title>自己紹介タイトル</title>
				<meta name="description" content="自己紹介概要" />
			</Head>
			<h1>自己紹介タイトル</h1>
		</div>
	)
}

ブラウザでhttp://localhost:3000/aboutにアクセスしてファイルの情報が表示されることを確認してください。
このようにNext.jsではpagesディレクトリにファイルを配置するだけで表示することができます。

ページのリンク

リンクは通常のhtmlと同様にaタグを使用することができますが、Linkコンポーネントを使用することで高速で画面遷移できたりとかその他にも色々メリットがあります。

pages/index.tsx

import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

export default function Home() {
	return (
		<div className="wrap">
			<Head>
				<title>Next.js使ってみた</title>
				<meta name="description" content="Next.jsのテストです。" />
			</Head>
			<nav>
				<ul>
					<li><Link href="/">Home</Link></li>
					<li><Link href="/about">About</Link></li>
				</ul>
			</nav>
			<h1>Next.js使ってみた</h1>
		</div>
	)
}

レイアウトコンポーネント

先ほどナビゲーションを作りましたが、こいうのはすべてのページに共通のものを入れることが多いと思います。
共通で使用できるようにレイアウト用のコンポーネントを作ってみましょう。

components/layout.tsx

import Head from 'next/head'
import Link from 'next/link'

type Props = {
	children?: React.ReactNode
	title?: string
	description?: string
}

export default function Layout({ children, title, description }: Props) {
	const pageTitle = title || 'ホームページタイトル'
	return (
		<div className="wrap">
			<Head>
				<title>{ pageTitle }</title>
				<meta name="description" content={ description || 'ホームページ概要' } />
			</Head>
			<header>
				<h1>{ pageTitle }</h1>
			</header>
			<nav>
				<ul>
					<li><Link href="/">Home</Link></li>
					<li><Link href="/about">About</Link></li>
				</ul>
			</nav>
			<main>{ children }</main>
			<footer>&copy; Next.js Demo</footer>
		</div>
	)
}

このレイアウトコンポーネントをindex.tsxで使用します。

components/layout.tsx

import Link from 'next/link'
import Layout from '../components/layout'
import styles from '../styles/Home.module.css'

export default function Home() {
	return (
		<Layout
			title="ホームページタイトル"
			description="ホームページ概要"
		>
			<p>ホームページコンテンツ</p>
		</Layout>
	)
}

スタイルについて

スタイルは最初からstylesディレクトリにCSSファイルが入っています。
styles/globals.cssは自動的に読み込まれるのですべてのページに反映したいスタイルなどに使用します。
ページ専用のスタイルを使用したい場合はstyles/Home.module.cssのようなファイルを作成します。

例えば文字を赤くするスタイルを作ったとすると。

styles/Home.module.css

.colorRed {
	color: red;
}

インポートして使用することでファイル間のクラス名のバッティングを回避することができます。

pages/index.tsx

import styles from '../styles/Home.module.css'
// ...
<p className={styles.colorRed}>ホームページコンテンツ</p>

静的HTMLに書き出す

ざっと使い方がわかったので最後にビルドしてみましょう。
最終的にどのような運用をするかによって変わってくると思いますが、今回は静的なHTMLに書き出してみます。

package.jsonのbuild部分を次のように書き換えます。

package.json

"scripts": {
	// ...
	"build": "next build && next export",
},

次に下記コマンドを実行

$ yarn build

outというディレクトリが作成され、その中にHTMLファイルとかが入っています。

outというディレクトリ名を変更することもできます。
next exportに-oオプションを追加しましょう。

package.json

"scripts": {
	// ...
	"build": "next build && next export -o dist",
},