この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
GraphCMSはGraphQLクエリを使用できるヘッドレスCMSになります。
リッチテキストをReactプロジェクトで表示する方法は、react-markdownを使用するなど様々ありますが、今回はGraphCMS用のrich-text-react-rendererを使用したいと思います。
プロジェクト作成
graphCMSにログインし、new projectから新しいプロジェクトを作成します。
ちなみに、リージョンの指定方法が以前よりシンプルになりました。
サイドバーから、「Scheeme」に移動し、新しくモデルを作成します。
スキーマを作成します。今回は「text」と「richText」を、それぞれ「title」と「content」という名前で作成しました。
サイドバーから、「Content」に移動し、作成したモデルを選択します。
右上の「+ create entry」から、新しくコンテンツを作成します。
サイドバーから「Setting」に移動し、「Public content API」を選択します。
Permissionを以下のように設定します。
Enviromentを選択し、APIをコピーしておきます。
Next.jsプロジェクトの作成
プロジェクトを作成します。
$ yarn create-next-app
.env.localファイルを作成し、コピーしたURLを追加します。
env.local
NEXT_PUBLIC_GRAPHCMS_API=コピーしたAPI
libs/apollo-clients.tsファイルを作成し、ApolloClientを初期化します。
libs/apollo-client.ts
import { ApolloClient, InMemoryCache } from "@apollo/client";
export const client = new ApolloClient({
uri: process.env.NEXT_PUBLIC_GRAPHCMS_API,
cache: new InMemoryCache(),
});
rich-text-react-rendererの使用
rich-text-react-renderer
をインストールします。
yarn add @graphcms/rich-text-react-renderer
# または
npm i @graphcms/rich-text-react-renderer
rich-text-types
はリッチテキストの型を定義します。
RichTextをインポートし、contentにリッチテキストの内容を指定します。
index.tsxを以下のように変更します。
index.tsx
import { gql } from "@apollo/client";
import { GetServerSideProps } from "next";
import { client } from "../libs/apollo-client";
import { RichText } from '@graphcms/rich-text-react-renderer';
import { RichTextContent } from "@graphcms/rich-text-types";
export const getServerSideProps: GetServerSideProps = async () => {
const { data } = await client.query({
query: gql`
query MyQuery {
sampleModels {
id
content {
raw
}
}
}
`,
});
return {
props: {
data: data.sampleModels,
},
};
};
const Home = (props: { data: { content: { raw: RichTextContent; }; }[]; }) => {
return (
<>
<RichText
content={props.data[0].content.raw}
/>
</>
);
};
export default Home;
スタイルの変更
RichTextにrenderersを渡すことでスタイルの変更ができます。
<RichText
content={props.data[0].content.raw}
renderers={{
h1: ({ children }) => <h1 style={{color: "red"}}>{children}</h1>,
h2: ({ children }) => <h2 style={{background: "lime"}}>{children}</h2>,
}}
/>
NextLinkの使用
Next.jsでは、リッチテキストのリンクが内部リンクの場合に、NextLinkを使用するよう変更できます。
<RichText
content={props.data[0].content.raw}
renderers={{
a: ({ children, openInNewTab, href, rel, ...rest }) => {
if (href?.match(/^https?:\/\/|^\/\//i)) {
return (
<a href={href} {...rest}>
{children}
</a>
);
}
return (
<Link href={href ? href : ""}>
<a {...rest}>{children}</a>
</Link>
);
},
}}
/>
まとめ
今回は、GraphCMSの公式ブログを参考に、rich-text-react-rendererを使用してGraphCMSのリッチテキストを表示してみました。
GraphCMSはブログも頻繁に更新されており、Reactの他にも、Vueやsvelteでの表示方法の記事もあります。リッチテキストを使用する場合は、ブログを覗いてみると開発が捗ると思います。
ではまた。