メタタグを個別のページ 1 つ 1 つにを書くにはつらい

別ファイルに meta 情報のファイルを作って route で出し分けたら便利なのかなと

ファイル自体は json でもいいし、その方がスプレッドシートから自動で生成する方法が運用を考えるといいかなと

meta 情報のファイル ↓、route を基準にして各ページで呼び出す

meta.ts

interface Meta {
  route: string;
  title: string;
  description: string;
}
export const meta: Meta[] = [
  {
    route: '/',
    title: 'TOP PAGE',
    description: 'TOP PAGE'
  },
	{
		route: '/about',
		title: 'ABOUT PAGE',
		description: 'ABOUT PAGE'
];

_app で route 情報をもとに title と description を設定する

_app.js

import Head from 'next/head';
import { useRouter } from 'next/router';
import { meta } from '@/meta';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const { title, description } = meta.find((_) => _.route === router.route) ?? {
    title: '',
    description: ''
  };

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

meta 情報は開発でも最後に回されることが多いので、毎回同じ方法を用意しておくと楽かなと思います。