2022-09-18

Next.jsでWebサイトを作る②〜トップページ・サブページ・エラーページ

目次

前回の続き

トップページを編集

トップページは pages/index.tsx のファイルになります。とりあえずプロジェクト作成時のコードを削除して簡単な内容を表示します。

pages/index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>TOP</title>
        <meta name="description" content="Generated by create next app" />
      </Head>
      <p>welcome page</p>
    </div>
  )
}

export default Home

yarn dev で確認

image

問題なく表示されています。

サブページを作成

サブページを作ります。 Next.js は pages ディレクトリの下にファイルを置くことで自動的にルーティングが割り当てられます。
pages/sub.tsx または pages/sub/index.tsx で localhost:3000/sub に自動的にルーティングされます。

pages/sub.tsx

import type { NextPage } from 'next'
import Head from 'next/head'

const Sub: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Sub</title>
        <meta name="description" content="Sub page" />
      </Head>
      <p>welcome sub page</p>
    </div>
  )
}

export default Sub

http://localhost:3000/sub へアクセスしてみます image

表示できました。

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

pages の下にレイアウトに関するテンプレートファイルを置くと、自動的にルーティングされてしまうので、pagesの外に出す必要があります。ディレクトリ構成についてはまだ知識不足ですが、今回は components/layouts に作成します。

components/layouts/index.tsx

import * as React from 'react'
import { Html, Head, Main, NextScript } from 'next/document'

const DocumentLayout = () => {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

export default DocumentLayout

next/documentから４つのコンポーネントを import しています。これらはこのあとの _document.tsx で使用します。Next.js ではデフォルトで<html>や<head>を定義してくれますが、変更する場合はnext/document からimport したコンポーネントを使用する必要があります。そしてその４つのコンポーネントはいずれも欠けてはならず、全て記述しなければなりません。

_document.tsx

pages ディレクトリの全ページに適用される、HTMLドキュメントの起点となるファイルです。サーバーサイドで実行される共通処理を記述します。ファイルの場所は pages の下に作成します。ここで現在の pages ディレクトリを確認しておきます。

┬ pages
├ _app.tsx
├ _document.tsx
├ index.tsx
└ sub.tsx

_document.tsx

import DocumentLayout from '@/layouts'

export default function Document() {
  return <DocumentLayout />
}

ここで先程作成したレイアウトを import して使用しています。実際今回は何もしてませんが、フォントを追加したり、タグマネージャーのコードだったりを今後書いていきます。注意するべきことはサーバーサイド側の処理のみなので、クライアントサイド側の処理（ロジックなど）は書くべきではないことです。

Custom Error Page

最後に公式を参考にエラーページを作成します。
こちらのサイトも参考にさせて頂きました【Next.js】Custom Error Pageについて簡単な共有 | Zenn

404ページ

まずはエラーページの中でも最も頻繁にユーザーが訪れるであろう404ページですが、pages/404.tsx にファイルを作成するだけです。

pages/404.tsx

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

export default function Custom404() {
  return (
    <>
      <Head>
        <title>404 - Page Not Found</title>
      </Head>
      <h1>404 - Page Not Found</h1>
      <Link href="/">&gt; top</Link>
    </>
  )
}

500ページ

同様に500ページを作成します。

pages/500.tsx

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

export default function Custom500() {
  return (
    <>
      <Head>
        <title>500 - Server-side error occurred</title>
      </Head>
      <h1>500 - Server-side error occurred</h1>
      <Link href="/">&gt; top</Link>
    </>
  )
}

それ以外のエラーページ

404や500などの独自に作成したエラーページ以外で表示するエラーコンポーネントを作成します。

pages/_error.tsx

import React from 'react'
import { NextPage, NextPageContext } from 'next'
interface Props {
  statusCode: number
}
const Error: NextPage<Props> = ({ statusCode }) => {
  return <div>{statusCode}エラーが発生しました</div>
}

Error.getInitialProps = async ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : ?? 500 : 404;
  return { statusCode }
}

export default Error
© 2019 USA GIJUTSU.