關於 generateMetadata
(Metadata動態版)
===

###### With Next.js App Router
:::info
:radio_button: [回到目錄攻略](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/BJiplPwMC)
:::

0.啥是generateMetadata?
---
:round_pushpin:據[Next.Js官方](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function)文件所說的：
> Dynamic metadata depends on dynamic information, such as the current route parameters, external data, or metadata in parent segments, can be set by exporting a generateMetadata function that returns a Metadata object

`generateMetadata`的函數的作用，主要目的是根據不同的情況來生成Metadata（元數據）。Metadata可以根據不同的情況而改變，比如根據目前的網頁路徑參數、外部的數據，或是父級的段落中的Metadata來設置。

就我目前所需，也就是title語言可以切換的話，就要使用`generateMetadata`，因此在上一章講到的[靜態Metadata](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/B1x5fhlXA)便不支援使用。

1.使用目標
---
`generateMetadata`使用的目的還有很多，此專案就先以可以動態改變網標上的語言做為此成果展現。

<font color="#F7A004">**先看最後成果**</font>
可以看到各頁面網標的部分也會隨著語言做變動！

:rocket: 此章會針對在[基礎設置Metadata](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/B1x5fhlXA)的寫法基礎上做更動與調整。

2.主頁網標的動態語言調整加入
---
>> @locale/main/layout.tsx

...
import { getTranslations } from "next-intl/server";

export async function generateMetadata() {
  const t = await getTranslations();
  return {
    title: {
      template: `%s | ${t("web-title")}`,
      default: `${t("web-title")}`,
    },
    openGraph: {
      title: "Tourist Attractions in Taiwan",
      description:
        "Let's travel around Taiwan! Explore this beautiful island through this website and discover the myriad attractions and destinations it has to offer.",
    },
    metadataBase: new URL("http://localhost:3000"),
    alternates: {
      languages: {
        en: "/en/main",
        zh: "/zh/main",
      },
    },
  };
}
...

3.子頁網標的動態語言調整加入
---
>> @locale/${AREA}/layout.tsx

import { getTranslations } from "next-intl/server";

export async function generateMetadata() {
  const t = await getTranslations();
  return {
    title: {
      template: `%s | ${t(${Your Own Title})}`,
      default: `${t(${Your Own Title})}`,
    },
    openGraph: {
      title: ${Your Own Title},
      description:
        "Let's travel around Taiwan! Explore the east in Taiwan through this website and discover the myriad attractions and destinations it has to offer.",
    },
    metadataBase: new URL("http://localhost:3000"),
    alternates: {
      languages: {
        en: "/en/east",
        zh: "/zh/east",
      },
    },
  };
}

4.各頁page.tsx動態語言調整加入
---
import { getTranslations } from "next-intl/server";

export async function generateMetadata() {
  const t = await getTranslations();
  return {
    title: t(${CITY}),
    metadataBase: new URL("http://localhost:3000"),
    alternates: {
      languages: {
        en: "/en/${AREA}/${CITY}",
        zh: "/zh/${AREA}/${CITY}",
      },
    },
  };
}

參考
---
- [Next.Js: Metadata Object and generateMetadata Options](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)