Nextraでドキュメント構築してみたよ！
nextra
カスタマイズ
テーマカスタマイズ

theme.config.tsx

https://nextra.site/docs/docs-theme/theme-configuration#project-link (opens in a new tab)

各変更を反映するには、再度pnpm next (yarn dev)等必要
全体的な変更となるので、個別に設定したい場合は、_meta.json で設定する方法もある

タイトル変更

logo: <span>My Nextra Documentation</span>,の span タグ内を変更

logo: <span>ドキュメント管理</span>,

アイコン付き

logo: (
    <>
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M14.683 14.828a4.055 4.055 0 0 1-1.272.858a4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62a5.963 5.963 0 0 0 2.148.903a6.035 6.035 0 0 0 3.542-.35a6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2c0 4.411-3.589 8-8 8z"
        ></path>
      </svg>
      <span style={{ marginLeft: '.4em', fontWeight: 800 }}>
        My Cool Project
      </span>
    </>
    ),

GithubURL 変更 or 削除

link 欄を編集してリンク先を変更

 project: {
   link: 'https://github.com/washo/nextra0',
   },

また、Github アイコンを変更したい場合は、
project プロパティに icon を追記する
Gitlab のアイコンへ変更する例

 icon: <svg width="24" height="24" viewBox="0 0 256 256"><path fill="currentColor" d="m231.9 169.8l-94.8 65.6a15.7 15.7 0 0 1-18.2 0l-94.8-65.6a16.1 16.1 0 0 1-6.4-17.3L45 50a12 12 0 0 1 22.9-1.1L88.5 104h79l20.6-55.1A12 12 0 0 1 211 50l27.3 102.5a16.1 16.1 0 0 1-6.4 17.3Z"></path></svg>,

削除したい場合は、project プロパティを削除すると、アイコンも非表示となる

Twitter 追加

chat: {
    link: 'https://twitter.com/washo',
    icon: <svg width="24" height="24" viewBox="0 0 248 204"><path fill="currentColor" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07a50.338 50.338 0 0 0 22.8-.87C27.8 117.2 10.85 96.5 10.85 72.46v-.64a50.18 50.18 0 0 0 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71a143.333 143.333 0 0 0 104.08 52.76 50.532 50.532 0 0 1 14.61-48.25c20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26a50.69 50.69 0 0 1-22.2 27.93c10.01-1.18 19.79-3.86 29-7.95a102.594 102.594 0 0 1-25.2 26.16z"/></svg>,
  },

TOC タイトルを変更

デフォルトのOn This Pageを変更

 toc: {
  title: "目次"
  },

検索内の文字変更

デフォルトで表示されているSearch Documentを変更

   search: {
     placeholder: "検索"
   },

右サイドバー下の 2 行を非表示

右サイドバー下に、Question? Give us feedback →とEdit this pageは不要なので非表示にする

  editLink: {
    text: null,
  },
  feedback: {
    content: null,
  },

フッターを編集

footer: {
    text: 'Nextra Docs Template',
  },

サイドバーの表示・非表示トグルボタン

デフォルトでは false でトグルボタンは表示されないので、表示にする

sidebar: {
toggleButton: true
},

Dark/Light テーマ

Dark/Light 切り替えボタンを非表示

darkMode: false,

サイドバーのトグルボタンも消えてしまう？？

配色変更

Dark/Light それぞれに配色を変更可能

  primaryHue: {
    dark: 300,
    light: 225,
  },

バナー

お知らせなどで最上位にバナーを表示させたい

  banner: {
    text: "Nextraでドキュメント構築してみたよ！",
  },

Head

https://nextra.site/docs/docs-theme/theme-configuration#head-tags (opens in a new tab)

<head>タグを編集するファイルは用意されていないので、theme.config.tsx 内で定義する

  head: (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta property="og:title" content="Nextra" />
      <meta property="og:description" content="The next site builder" />
    </>
  ),
_meta.jsonSSG