Closed2023/05/31にクローズ13

App Routerでのメタデータ設定を理解する

Next.js

hajimism

これを読む

hajimism

基本はmetadataかgenerateMetadataをexportすればいいらしい。

// either Static metadata
export const metadata = {
  title: '...',
};
 
// or Dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: '...',
  };
}

hajimism

型も用意してくれているらしい

import { Metadata } from 'next';

hajimism

layoutかpageからexportする

hajimism

え？？searchParamsってこんなふうに受け取れたの？？

type Props = {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

hajimism

うーん、parentとの解決は勝手にやってくれるのかい？やってくれないのかい？どっちなんだい！

  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || [];
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  };

hajimism

解決してくれるかはわからんけどdefault値を設定しておけば安心っていうのはわかった

export const metadata = {
  title: {
    default: 'Acme',
  },
};

hajimism

template記法もあるんや

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
  },
};

hajimism

やっぱり解決はしてくれそう。親を無視するためのプロパティがある。

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    absolute: 'About',
  },
};
 
// Output: <title>About</title>

hajimism

If a page does not define its own title the closest parents resolved title will be used.

書いてあった

hajimism

Vercelつこてたらこれは設定しそう？

  metadataBase: `https://${process.env.VERCEL_URL}`

When VERCEL_URL is detected: https:// ${process.env.VERCEL_URL} otherwise it falls back to http://localhost:$ {process.env.PORT || 3000}.

hajimism

「書き損じ」的なことがないようによしなにいろいろやってくれるらしい。

hajimism

あとはシンプルに「meta dataってこんなに色々あるんやな」っていう感想になってきた。Next.jsの〜とかじゃなくて、シンプルにここらへんを理解したほうが良さそう。

このスクラップは2023/05/31にクローズされました