Gatsby.jsその他

Gatsby.jsで、特定のシチュエーションでのみ設定が必要になる作業のまとめ。

Gatsby.jsとContentfulを連携する方法

gatsby-source-contentfulプラグインをインストール

npm install gatsby-source-contentful

gatsby-source-contentfulプラグインを設定

gatsby-config.jsのpluginsに以下を追加。

gatsby-config.js抜粋

{
  resolve: `gatsby-source-contentful`,
  options: {
    host: process.env.CONTENTFUL_HOST,
    environment: process.env.CONTENTFUL_ENVIRONMENT_ID,
    spaceId: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
    pageLimit: 444,
  },
},

Contentfulでは、25,000件までデータを登録できる。
しかし、25,000件のデータを一気に取り出すとタイムアウトになる。

そこで、pageLimitで1回で取り出すレコードの数を制限。
pageLimitの数値をいくつにするかは、Contentfulにどのようなデータを登録しているかによる。

環境変数を設定

.env系のファイル、およびホスティングサービスの環境変数に以下のものを追加。

CONTENTFUL_HOST=cdn.contentful.com
CONTENTFUL_ENVIRONMENT_ID=master
CONTENTFUL_SPACE_ID=xxxxx
CONTENTFUL_ACCESS_TOKEN=xxxxx

xxxxxの部分は各自の環境によって値が異なる。

Gatsby.jsにフォントを追加する方法

フォントモジュールのインストール

npm install @fontsource/noto-sans-jp

noto-sans-jpをインストール。

フォントモジュールをインポート

gatsby-browser.jsに以下を追加。

gatsby-browser.js抜粋

import "@fontsource/noto-sans-jp"

フォントを適用

MuiThemeProvider.jsxコンポーネントのcreateMuiTheme()に以下を追加。

MuiThemeProvider.jsx抜粋

    typography: {
      fontFamily: ["Noto Sans JP"].join(","),
    },

npm公式・Fontsource Noto Sans JP

フォント適用時の注意点

フォントを指定すると、最初はブラウザのデフォルトフォントで画面が表示され、
CSS読み込み時に指定したフォントが適用される。

よって、一瞬だが画面がちらつくような印象を受ける。
特にこだわりがなければ、フォントの指定をしない方がいいかもしれない。

目次