Next.js のプロジェクトは React のプロジェクトみたいに直接 html を編集することができないのでちょっと困りました。
ドキュメントを読んでてもちょっと分かりづらかったのでまとめ。
やりたいこと
<html lang="ja"> ← これと
<head>
<title>タイトル</title> ← これを設定したい
</head>
</html>
やったこと
2 つほどファイルを編集します。
まずは_document.tsx。
pages 内に無ければ作ってください。
pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
const Document = () => {
return (
<Html lang="ja">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
export default Document;
内容は下記リンクを参考に。
とくに内容をイジる必要はないので脳筋テンプレファイルだと思って作ればいいと思います。
次は_app.tsx。
以下のようにしてHeadとtitle追加してあげるだけです。
pages/_app.tsx
import type { NextPage } from "next";
import type { AppProps } from "next/app";
import Head from "next/head";
const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
return (
<div className="app">
<Head>
<title>タイトル</title>
</Head>
<Component value="何かしらのコンポーネント" />
</div>
);
};
export default MyApp;
ハマったポイント
書こうと思えば以下のように_document.tsxの中にtitleを書くこともできます。
pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
const Document = () => {
return (
<Html lang="ja">
<Head>
<title>タイトル</title> ← ここに書くこともできる
</Head>
</Html>
);
};
できますが、警告が出ます。
Warning: <title> should not be used in _document.js's <Head>.
訳）pages/_document.jsに<title>を追加すると、_document.jsは最初のプリレンダリング時にのみレンダリングされるため、next/headで予期せぬ結果を招くことになります。
ということみたいです。
ちなみに以下のような書き方は普通にエラーがでます。
pages/_document.tsx
import { Html, Main, NextScript } from "next/document";
import Head from "next/head"; // next/head の Head が読み込まれてる
const Document = () => {
return (
<Html lang="ja">
<Head>
<title>タイトル</title> ← ここに書くこともできる
</Head>
</Html>
);
};
Error: next/head should not be imported in pages/_document.tsx. Import Head from next/document instead.
訳）エラー: pages/_document.tsx で next/head がインポートされていません。代わりにnext/documentからHeadをインポートしてください。