Gatsby Slice APIをTypeScriptで

Slice APIとは

Gatsby v5で追加されたページ生成を高速化するためのAPIです。ページごとの共通コンポーネントをSliceしてビルドを高速します。

例として今日つコンポーネントのHeaderをSliceします。

HeaderComponentを以下に示します。

Slice APIはコンポーネントがexport defaultしてある前提です。注意しましょう。

src/components/shared/Header/index.tsx

const Header = () => {
  return (
    <Fragment>
      <div css={styles.header}>
        <Link to='/'>
          <h3 css={styles.title}>fukke.cafe</h3>
        </Link>
      </div>
    </Fragment>
  );
};

export default Header;

gatsby-nodeでSliceします。 createSliceメソッドにidとコンポーネントのパスを渡します。

gatsby-node.ts

import type { GatsbyNode } from 'gatsby';
import { resolve } from 'path';

export const createPages: GatsbyNode['createPages'] = ({ actions }) => {
  const { createSlice } = actions;
  createSlice({
    id: 'header', // ここのidがaliasになる
    component: resolve('src/components/shared/Header/index.tsx')
  });
};

Sliceしたコンポーネントは<Slice/>で使えます。

src/components/layouts/Detail/index.tsx

import { Slice } from 'gatsby';

  <header>
    <Slice alias='header' />
  </header>

その他の記事

公開日 2023/01/07

Thanks you for reading.

Gatsby Slice APIをTypeScriptで

Slice APIとは

HeaderをSliceする

その他の記事