# Fumadocs (Framework Mode, Astro): 変更履歴
URL: /ja/docs/astro/integrations/changelog
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/changelog.ja.mdx

プロジェクトのリリース情報を表示します。

## インストール [#installation]

タイムラインコンポーネントをインストールします。インストールすると、`@fumadocs/changelog` が依存関係に追加されます：

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

## 使い方 [#usage]

[Home Layout](/docs/ui/layouts/home-layout) の配下にページを作成します。エントリーを1ページ分取得して `ChangelogTimeline` でレンダリングし、`ChangelogPagination` で他のページへのリンクを表示します。

```astro tab="src/pages/changelog/[...page].astro"
---
import { getSecret } from 'astro:env/server';
import { githubReleases } from '@fumadocs/changelog/github';
import Layout from '@/layouts/Layout.astro';
import { Changelog } from '@/components/changelog-page';

// リクエストごとにレンダリングします（アダプターが必要です）
export const prerender = false;

const page = Number(Astro.params.page ?? 1);
const { entries, nextPage } = await githubReleases({
  owner: 'fuma-nama',
  repo: 'fumadocs',
  token: getSecret('GITHUB_TOKEN'),
  page,
});
if (entries.length === 0) return Astro.rewrite('/404');
---

<Layout title="Changelog">
  <Changelog
    client:load
    pathname={Astro.url.pathname}
    params={Astro.params}
    entries={entries}
    newer={page > 1 ? `/changelog/${page - 1}` : undefined}
    older={nextPage ? `/changelog/${nextPage}` : undefined}
  />
</Layout>
```

```tsx tab="src/components/changelog-page.tsx"
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/lib/layout.shared';
import { Provider, type ProviderProps } from '@/components/provider';
import {
  ChangelogPagination,
  ChangelogTimeline,
  type ChangelogTimelineEntry,
} from '@/components/changelog';

export interface ChangelogProps extends ProviderProps {
  entries: ChangelogTimelineEntry[];
  newer?: string;
  older?: string;
}

export function Changelog({ entries, newer, older, ...props }: ChangelogProps) {
  return (
    <Provider {...props}>
      <HomeLayout {...baseOptions()}>
        <div className="mx-auto flex w-full max-w-[900px] flex-col gap-10 px-4 py-12">
          <ChangelogTimeline entries={entries} />
          <ChangelogPagination newer={newer} older={older} />
        </div>
      </HomeLayout>
    </Provider>
  );
}
```

## ソース [#sources]

### GitHub Releases [#github-releases]

`githubReleases()` は、リポジトリで公開されているリリースを1ページ分返します。さらに古いリリースがある場合は、`nextPage` も返されます。

* バージョンは、`fumadocs-ui@16.17.0` のようなリリース名、またはそのタグから読み取られます。
* プレリリースのエントリーには `prerelease` プロパティがあります。
* GitHub では、認証なしのリクエストは1時間あたり60回までに制限されています。`token` を渡したうえで、ページをキャッシュしてください。
* GitHub で一覧取得できるのは最初の1000件のリリースまでです(トークンを使用した場合は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                           |

エントリーは props としてページから React アイランドへ渡されるため、コンテンツは `body` に React ノードとして記述するのではなく、`content` に Markdown として記述してください。