【ver14のNext.jsで動かす】『作って学ぶNext.js/React Webサイト構築』（随時更新予定）

はじめに

初版の『作って学ぶNext.js/React Webサイト構築』をバージョン14のNext.jsで触ってみたらところどころうまくいかないところがあるのでメモ。

P.56 カスタムAPPコンポーネントについて

うまくいかないところ

書籍では「pagesディレクトリ直下に_app.jsを作成する」とあるが、pagesディレクトリがない。
手動で_app.jsを作っても各ページに反映しない。

解決策

src/app配下にある（はず）layout.jsを以下のように修正する。

import { Inter } from "next/font/google";
import "./globals.css";
import Layout from "components/layout";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
        <Layout>
          {children}
        </Layout>
    </html>
  );
}

全ページに適用したい<Layout>コンポーネントをもともと定義されてるRootLayoutコンポーネントの中に定義してあげる形で対処できます。

参考

従来のNext.jsでは、pagesディレクトリ内に各ページのファイルがあり、アプリの共通設定は_documentや_appで指定されていました。一方、Next.js 13では、「app/layout.tsx」ファイルで全ページ共通のレイアウトを定義することが可能です。

P.58 ページを増やす

うまくいかないところ

pagesディレクトリがない。

解決策

src/appディレクトリがある（はず）ので、src/appディレクトリ内に作成したいURLと同じ名前のディレクトリを作成する（例：URLを/aboutにしたければaboutディレクトリ）。そして、作成したディレクトリの中に、page.jsファイルを作ってコンポーネントを作ってあげる。

例

page.js

import Hero from "components/hero";

export default function About() {

    return (
        <>
            about
            <Hero />
        </>
    )
}

こうすることで、/aboutにアクセスするとページが表示されるはずです。

解説

従来のNext.jsのルータはPages Routerと言いますが、Next.js 13よりApp Routerというルータが導入されました。
App Routerは、/app配下のフォルダ階層に応じてリクエストパスとコンポーネントの対応関係が決まります（参考：これからはじめるReact実践入門）。

P.188 メタデータを追加する

うまくいかないところ

Headコンポーネントを使ってtitleタグを設定しても、ページに反映されない。

解決策

const metadataをexportする。

page.js

import Container from 'components/container';
…

// タイトルの設定
export const metadata = {
    title: "アバウト"
}

export default function About(){
    …
}

参考