はじめに
初版の『作って学ぶ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
ファイルを作ってコンポーネントを作ってあげる。
例
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
する。
import Container from 'components/container';
…
// タイトルの設定
export const metadata = {
title: "アバウト"
}
export default function About(){
…
}
参考