本文・シェアの補助部品
リッチテキスト本文とシェアボタンの表示、props、スタイル調整。
Next.js App Routerで取得から表示まで任せる場合は、List・Viewを使います。このページでは、取得済みのHTMLを表示するRichTextと、公開URLを共有するShareButtonsを説明します。これらの補助部品はコンテンツを取得しません。
npm install @genko-me/react本文を表示する：RichText
RichTextにはリッチテキストフィールドのHTML文字列を渡します。Next.jsのサーバーコンポーネントからも使用できます。
import { notFound } from "next/navigation";
import { RichText } from "@genko-me/react";
import { genko } from "@/lib/client";
export default async function BlogPostPage({
params,
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params;
const post = await genko.apis.blog.getOrNull(id);
if (!post) notFound();
return (
<main>
<h1>{post.title}</h1>
<RichText html={post.body} as="article" className="article-body" />
</main>
);
}原稿を、あなたの環境へ
リッチテキストフィールドの値は、保存時にサーバー側でサニタイズされたHTML文字列です。取得した値をそのまま RichText に渡します。
- 見出し・段落・リスト
- リンクと画像
- 引用とコード
装飾はサイト側のCSSで用意します。詳しくはgenko.meをご覧ください。
| prop | 既定値 | 内容 |
|---|---|---|
html | — | HTML文字列。null／undefinedは空文字として描画 |
as | div | 描画するHTML要素 |
className | — | コンテナのCSSクラス |
本文の装飾はサイト側のCSSで用意します。proseというクラスを付けるだけで、タイポグラフィのCSSが自動で追加されるわけではありません。
.article-body { line-height: 1.9; }
.article-body h2 { margin-block: 2em 0.75em; font-size: 1.5em; }
.article-body p { margin-block: 1em; }
.article-body img { max-width: 100%; height: auto; }
.article-body pre { overflow-x: auto; }RichText自体はHTMLをサニタイズしません。genko.meの保存処理を通ったリッチテキストを表示する用途で使い、別の外部入力をそのまま渡さないでください。
シェアボタンを表示する：ShareButtons
クリック操作のあるシェアボタンは、別のサブパス@genko-me/react/share-buttonsからimportします。
urlにはサイト側の公開記事URLを渡します。配信APIのURLや、draftKeyを含むプレビューURLではありません。
| prop | 既定値 | 内容 |
|---|---|---|
url | 必須 | シェア先の公開URL |
title | 空文字 | シェアするタイトル |
services | x、line、hatena、copy | 表示するサービス。facebookも指定可能 |
size | 18 | アイコンサイズ。標準ボタンは36×36px |
className | — | コンテナのクラス |
buttonClassName | — | 各ボタンのクラス |
tooltipClassName | — | コピー完了ツールチップのクラス |
lang | ja | jaまたはen |
labels | 言語ごとのラベル | サービス名・copiedのラベルを個別上書き |
unstyled | false | 標準のレイアウト・ボタン等の装飾を外す |
コピーにはブラウザのClipboard APIを使います。利用できない環境ではコピーできないため、公開環境でも動作を確認してください。
見た目を調整する
標準スタイルの主なCSS変数です。コンポーネントを囲む要素などへ指定します。
| 変数 | 既定値 | 対象 |
|---|---|---|
--genko-radius | 10px | 角丸 |
--genko-border | #dfe2e3 | 枠線 |
--genko-border-hover | #c9cecf | ホバー時の枠線 |
--genko-bg | #ffffff | 背景 |
--genko-bg-hover | #f7f8f8 | ホバー時の背景 |
--genko-fg | #303537 | アイコンの色（ブランドロゴを除く） |
--genko-focus-ring | rgba(37, 42, 44, .055) | フォーカス表示 |
--genko-ok | #2e7d54 | コピー完了の色 |
--genko-tooltip-bg | #252a2c | ツールチップ背景 |
--genko-tooltip-fg | #ffffff | ツールチップ文字 |
既定値は@genko-me/reactのGENKO_DESIGN_TOKENSからも取得できます。各ブランドのアイコン色は固定です。
独自スタイルを使う場合はunstyledを有効にします。キーボード操作時のフォーカス表示も用意してください。
<ShareButtons
url="https://your-site.example.com/blog/abcDEF123456"
unstyled
className="share-row"
buttonClassName="share-button"
/>.share-row { display: flex; gap: 12px; }
.share-button { padding: 10px; border: 1px solid currentColor; }
.share-button[data-focus-visible] { outline: 2px solid blue; outline-offset: 3px; }UIを自作する場合は、SDKのbuildShareUrl(service, { url, title })でシェアURLだけを組み立てられます。copyはURLを開く操作ではないため、この関数の対象外です。
最終更新: 2026年9月8日