Closed13

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

Next.js
hajimismhajimism

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

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

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

import { Metadata } from 'next';
hajimismhajimism

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

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

うーん、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],
    },
  };
hajimismhajimism

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

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

template記法もあるんや

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

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

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

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

書いてあった

hajimismhajimism

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}.

hajimismhajimism

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

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