CSS カスタマイズ

nextra docs テーマの CSS は、下記のスタイルがデフォルトで設定されています

styles.css

:root {
  --shiki-color-text: #414141;
  --shiki-color-background: transparent;
  --shiki-token-constant: #1976d2;
  --shiki-token-string: #22863a;
  --shiki-token-comment: #aaa;
  --shiki-token-keyword: #d32f2f;
  --shiki-token-parameter: #ff9800;
  --shiki-token-function: #6f42c1;
  --shiki-token-string-expression: #22863a;
  --shiki-token-punctuation: #212121;
  --shiki-token-link: #22863a;
}
 
.dark {
  --shiki-color-text: #d1d1d1;
  --shiki-token-constant: #79b8ff;
  --shiki-token-string: #ffab70;
  --shiki-token-comment: #6b737c;
  --shiki-token-keyword: #f97583;
  --shiki-token-parameter: #ff9800;
  --shiki-token-function: #b392f0;
  --shiki-token-string-expression: #4bb74a;
  --shiki-token-punctuation: #bbbbbb;
  --shiki-token-link: #ffab70;
}

独自 CSS

細かい部分やフォントを変更したい場合は、Next.js の Global スタイルによる変更で可能となります
https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet (opens in a new tab)

styles.css

nextra のトップディレクトリ（任意でも良い)に styles.css を作成

/styles.css

body {
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
}

_app.tsx

次に、pages/_app.tsx のファイル名を作成し、styles.css を import する記述を記入する

_app.tsx

import "../styles.css";
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Google フォント

Google Fonts (M Plus 1p)を font-family に設定してみる https://fonts.google.com/specimen/M+PLUS+1p (opens in a new tab) のサイトから利用するスタイルを選択し、@importとfont-familyの記述を取得

styles.css に下記を記述

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400&display=swap");
body {
  font-family: -apple-system, "M PLUS 1p", BlinkMacSystemFont, Helvetica Neue, Segoe
      UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial,
    メイリオ, Meiryo, sans-serif;
}

_app.tsxで import "../styles.css";で有効になっている事を確認

SSG