404 Not Foundページの作成

Next.js 13以降で採用されたApp RouterでWebページ作成中。404 Not Foundページの作成方法が、Page Routerの時と変わっていたのでもメモ。公式ドキュメントに書いてありました。

App Routerでは、appディレクトリにnot-found.jsのファイルを生成するようです。

import Link from "next/link";
export const metadata = {
 title: 'ページが見つかりません'
}
export default function Error404() {
 return (
  <div>
   <h1>ファイルがない…ただの屍のようだ…</h1>
   <Link href="/">TOP PAGE</Link>
  </div>
 )
}

表示イメージ（ヘッダーやグローバルナビは無視して下さい）

静的エクスポート Static Exports(Static HTML Export)

ついでに、Next.js 13.4ではNext.jsで構築したアプリケーションを静的ファイルに書き出す静的エクスポート<Static Exports(Static HTML Export)>のコマンドである、next exportが廃止されやり方が変わっていたのでそれもメモ。

next.config.jsでコンフィグの中に、output: 'export'を記述。

/** @type {import('next').NextConfig} */
const nextConfig = {
 output: 'export',
}
module.exports = nextConfig

エクスポートを実行。

% npm run build

ビルドが実行されるのでしばらく待ちます。何事もエラーがなければ終了します。ファイルは/out/のディレクトリに生成されます。

下層ページをディレクトリごと出力する

このままエクスポートすると、たとえばabout/page.jsは、about.htmlとして静的ファイルが出力されます。

これをabout/という風にディレクトリごとに出力したい場合は、コンフィグファイルに設定を加えます。先ほどのnext.config.jsの設定値の行の次に、trailingSlash: trueを追加し、再度エクスポートをします。

/** @type {import('next').NextConfig} */
const nextConfig = {
 output: 'export',
 trailingSlash: true
}
module.exports = nextConfig

すると、about/index.htmlのように出力追加されます。

ブラウザでもabout.htmではなく、about/でアクセスできるようになりました。

おしまい♥

タグ：Next.jsnpm(Node.js)React