# Fumadocs (Framework Mode, Next.js): 更新日誌
URL: /zh-TW/docs/next/integrations/changelog
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/changelog.zh-TW.mdx

展示您專案的版本發布紀錄。

## 安裝 [#installation]

請安裝時間軸 (timeline) 元件，這會將 `@fumadocs/changelog` 加入您的相依套件：

```npm
npx @fumadocs/cli@latest add changelog
```

## 使用方式 [#usage]

請在您的[首頁版面配置](/docs/ui/layouts/home-layout)下建立一個頁面。先取得一頁的條目，再以 `ChangelogTimeline` 算繪，並透過 `ChangelogPagination` 連結至其他頁面：

```tsx title="app/(home)/changelog/[[...page]]/page.tsx"
import { notFound } from 'next/navigation';
import { githubReleases } from '@fumadocs/changelog/github';
import { ChangelogPagination, ChangelogTimeline } from '@/components/changelog';

export const revalidate = 3600;

export default async function Page(props: PageProps<'/changelog/[[...page]]'>) {
  const { page: segments = [] } = await props.params;
  const page = Number(segments[0] ?? 1);
  const { entries, nextPage } = await githubReleases({
    owner: 'fuma-nama',
    repo: 'fumadocs',
    token: process.env.GITHUB_TOKEN,
    page,
  });
  if (entries.length === 0) notFound();

  return (
    <div className="mx-auto flex w-full max-w-[900px] flex-col gap-10 px-4 py-12">
      <ChangelogTimeline entries={entries} />
      <ChangelogPagination
        newer={page > 1 ? `/changelog/${page - 1}` : undefined}
        older={nextPage ? `/changelog/${nextPage}` : undefined}
      />
    </div>
  );
}
```

## 來源 [#sources]

### GitHub Releases [#github-releases]

`githubReleases()` 會回傳儲存庫已發布版本中的一頁，若還有較舊的版本，則會附上 `nextPage`。

* 版本號會從發布名稱 (例如 `fumadocs-ui@16.17.0`) 或其標籤中讀取。
* 預先發布版本的項目會帶有 `prerelease` 屬性。
* GitHub 將未經驗證的請求限制為每小時 60 次。請傳入 `token` 並快取該頁面，例如 `export const revalidate = 3600`。
* GitHub 只會列出前 1000 個發布版本，使用 token 時則為 10000 個。超出範圍的頁面不會有任何項目。

### $Fumadocs

| Prop       | Type                  | Description                                                              |
| ---------- | --------------------- | ------------------------------------------------------------------------ |
| `owner`    | `string`              |                                                                          |
| `repo`     | `string`              |                                                                          |
| `token?`   | `string \| undefined` | GitHub access token, unauthenticated requests are limited to 60 per hour |
| `page?`    | `number \| undefined` | Page of releases, starting from 1 Default: `1`                           |
| `perPage?` | `number \| undefined` | Releases per page, up to 100 Default: `30`                               |
| `baseUrl?` | `string \| undefined` | Base URL of GitHub API Default: `'https://api.github.com'`               |

### 自訂項目 [#custom-entries]

項目是純物件，您可以從任何來源建立：

### $Fumadocs

| Prop        | Type                                                | Description                                   |
| ----------- | --------------------------------------------------- | --------------------------------------------- |
| `id`        | `string`                                            | unique, e.g. a release tag                    |
| `title`     | `string`                                            |                                               |
| `date`      | `Date`                                              |                                               |
| `versions?` | `{ name: string; version: string; }[] \| undefined` | released packages, like `fumadocs-ui@16.17.0` |
| `url?`      | `string \| undefined`                               | URL of the entry, e.g. a GitHub release       |
| `content?`  | `string \| undefined`                               | content in Markdown                           |

例如從一組 MDX 檔案建立。傳入 `body` 即可自行算繪內容：

```tsx title="app/(home)/changelog/page.tsx"
import { changelogSource } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';
import { ChangelogTimeline, type ChangelogTimelineEntry } from '@/components/changelog';

export default function Page() {
  const entries: ChangelogTimelineEntry[] = changelogSource.getPages().map((page) => {
    const MDX = page.data.body;

    return {
      id: page.url,
      title: page.data.title,
      date: new Date(page.data.date),
      body: <MDX components={getMDXComponents()} />,
    };
  });

  return (
    <div className="mx-auto w-full max-w-[900px] px-4 py-12">
      <ChangelogTimeline entries={entries} />
    </div>
  );
}
```