【React】Nextスターターキットを作った-3. ページファイル編（Next + TypeScript + CSS in JS）

Nextの続きです。前回はNextスターターキットのコンポーネント&モジュールについてまとめました。今回は最終回、ページファイル編になります。Next.jsの複数ページ設定（/pagesフォルダ）を使った内容になります。それではいきましょう！

【目次】

前回のおさらい
作ったもの
トップページ
Aboutページ
404ページ
最後に

※参考：前回記事
【React】Nextスターターキットを作った-2. コンポーネント編（Next + TypeScript + CSS in JS） - クモのようにコツコツと

※参考：ReactでWebアプリを作るシリーズまとめ
qiita.com

前回のおさらい

Nextスターターキットで作ったコンポーネントやモジュールをまとめた。async/awaitのエラーハンドリングなども。

※参考：前回記事
【React】Nextスターターキットを作った-2. コンポーネント編（Next + TypeScript + CSS in JS） - クモのようにコツコツと

今回は各ページのファイルについてまとめる。Next.jsの/pagesフォルダの中に作っていく。

作ったもの

ソースコード

※参考：GitHub - ryo-i/next-app-started

プレビュー

※参考：Nextアプリスターターキット

トップページ
f:id:idr_zz:20210501124640j:plain

/pages/index.tsxに当たる部分 next-app-started.vercel.app

トップページ固有のOGPも表示される！

Aboutページ
f:id:idr_zz:20210501124656j:plain

/pages/about.tsxに当たる部分

※参考：next-app-started.vercel.app

Aboutページ固有のOGPも表示される！

404ページ
f:id:idr_zz:20210502153951j:plain

/pages/404.tsxに当たる部分。存在しないURLを開くと表示される。

※参考：https://next-app-started.vercel.app/abc123456

トップページ

/pagesフォルダにindex.tsxを追加。

Head、Header、Inner、Footerコンポーネントをインポート

import Head from 'next/head';
import Header from '../components/Header';
import Inner from '../components/Inner';
import Footer from '../components/Footer';

HeadはNext.jsが用意しているheadタグをカスタマイズするコンポーネント

※参考：【React】Next.jsのリンク設定（Link）、共通コンポーネント化、headタグ設定(Head） - クモのようにコツコツと

Header、Inner、Footerは前回作成したコンポーネント（Innerはトップページ固有）

※参考：【React】Nextスターターキットを作った-2. コンポーネント編（Next + TypeScript + CSS in JS） - クモのようにコツコツと

次にトップページのテキスト設定

変数Dataでdata.jsonを取得

import Data from '../data/data.json';

変数headerTitle、headerText、pageTitle、pageTextでテキスト設定

const headerTitle = Data.header.title;
const headerText = Data.header.text;
const pageTitle = Data.main.title;
const pageText = Data.main.text;

Homeコンポーネント作成

function Home() {
  return (
    <>
      <Head>
        <title>{ headerTitle }</title>
        <meta name="description" content={ headerText } />
        <meta property="og:title" content={ headerTitle } />
        <meta property="og:description" content={ headerText } />
      </Head>
      <Header />
      <main>
        <h1>{ pageTitle }</h1>
        <p dangerouslySetInnerHTML={{ __html: pageText }}></p>
        <Inner />
      </main>
      <Footer />
    </>
  )
}

Headコンポーネントでheadタグ設定
titleタグ&og:titleでheaderTitleを読み込む
description&og:descriptionでheaderTextを読み込む
Headerコンポーネントを読み込み
mainタグの設定
h1タグでpageTitle、pタグでpageTextを読み込む
Innerコンポーネントを読み込む
Footerコンポーネントを読み込む

最後にHomeをエクスポート

export default Home;

これでトップページが表示される！
f:id:idr_zz:20210501124640j:plain

※参考：Nextアプリスターターキット

Aboutページ

/pagesフォルダにabout.tsxを追加。

Head、Header、Profile、Footerコンポーネントをインポート

import Head from 'next/head';
import Header from '../components/Header';
import Profile from '../components/Profile';
import Footer from '../components/Footer';

Profileは前回作成したコンポーネントで、Aboutページ固有の内容

※参考：【React】Nextスターターキットを作った-2. コンポーネント編（Next + TypeScript + CSS in JS） - クモのようにコツコツと

次にAboutページのテキスト設定

変数Dataでdata.jsonを取得

import Data from '../data/data.json';

変数headerTitle、pageTitle、pageText、headTitleでテキスト設定

const headerTitle = Data.header.title;
const pageTitle = 'このアプリについて';
const pageText = 'アプリの概要をここに書く。';
const headTitle = pageTitle + ' | ' + headerTitle;

pageTitleとpageTextはベタガキ、headTitleはpageTitleとheaderTitleの組み合わせ

Aboutコンポーネント作成

// Component
function About() {
    return (
        <>
        <Head>
            <title>{ headTitle }</title>
            <meta name="description" content={ pageText } />
            <meta property="og:title" content={ headTitle } />
            <meta property="og:description" content={ pageText } />
        </Head>

        <Header />
        <main>
            <h1>{ pageTitle }</h1>
            <p dangerouslySetInnerHTML={{ __html: pageText }}></p>
            <section>
                <h2>使い方</h2>
                <p>アプリの説明説明説明説明説明説明説明説明</p>
            </section>
            <Profile />
        </main>
        <Footer />
        </>
    );
}

トップページと違いsectionタグの中がベタガキ
トップページと違いProfileコンポーネントを読み込んでいる

最後にAboutコンポーネントをエクスポート

export default About;

これでAboutページが表示される！
f:id:idr_zz:20210501124656j:plain

※参考：このアプリについて | Nextアプリスターターキット

404ページ

もう一つ、404ページも作成した。

Next.jsでは/pagesに存在しないURLを開くとデフォルトで用意された404ページが表示される。
f:id:idr_zz:20210502162139j:plain

この404ページをカスタマイズするには/pagesに404.tsxを追加すればいいようだ。

※参考：Advanced Features: エラーページのカスタマイズ | Next.js

これまで作ったトップページ、Aboutページと同じ構成の404ページを作ってみた。

Head、Link、Header、Profile、Footerコンポーネントをインポート

import Head from 'next/head';
import Link from 'next/link';
import Header from '../components/Header';
import Profile from '../components/Profile';
import Footer from '../components/Footer';

Aboutページで表示したProfileをここでも表示することにする。

404ページのテキスト設定

変数Dataでdata.jsonを取得

import Data from '../data/data.json';

変数headerTitle、pageTitle、pageText、headTitleでテキスト設定

const headerTitle = Data.header.title;
const pageTitle = '404ページ';
const pageText = 'お探しのページは見つかりませんでした。';
const headTitle = pageTitle + ' | ' + headerTitle;

Aboutページと同じくpageTitle、pageTextはベタガキ

notFoundコンポーネント作成

// Component
function notFound() {
    return (
        <>
        <Head>
            <title>{ headTitle }</title>
            <meta name="description" content={ pageText } />
            <meta property="og:title" content={ headTitle } />
            <meta property="og:description" content={ pageText } />
        </Head>

        <Header />
        <main>
            <h1>{ pageTitle }</h1>
            <p dangerouslySetInnerHTML={{ __html: pageText }}></p>
            <section>
                <h2>Homeに戻る</h2>
                <p>こちらからお戻りください→ <Link href="/"><a>Home</a></Link></p>
            </section>
            <Profile />
        </main>
        <Footer />
        </>
    );
}