Gastby レイアウト

wrapper.js

Gatsbyのwrapper.jsファイルは、ページ全体をラップするために使用されるファイルです。 このファイルを使用することで、特定のHTML要素やReactプロバイダーでページをラップすることができます。 これにより、ページ全体に共通のレイアウトや機能を簡単に適用できます。

例えば、以下のようにwrapper.jsファイルを作成し、ページを特定のコンポーネントでラップすることができます。

1
2
3
4
5
6

import React from 'react';
import Layout from './src/components/Layout';

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

この例では、Layoutコンポーネントでページ全体をラップしています。これにより、すべてのページに共通のレイアウトが適用されます。

さらに詳しい情報や具体的な使用例については、Gatsbyの公式ドキュメントを参考にすると良いでしょう¹。

他に知りたいことがあれば教えてくださいね！

ソース: Copilot との会話、 2024/9/4 (1) gatsby-plugin-wrap-pages | Gatsby. https://www.gatsbyjs.com/plugins/gatsby-plugin-wrap-pages/. (2) Gatsby公式チュートリアルやったよ #JavaScript - Qiita. https://qiita.com/irico/items/cf87eb29ecaf7e135fcd. (3) Gatsby.js 入門 - Zenn. https://zenn.dev/dev8/articles/gatsby_tutorial. (5) en.wikipedia.org. https://en.wikipedia.org/wiki/Gatsby_(software).

wrapper.js:

1
2
3
4
5
6
7
8
9

import React from "react";
import Layout from "./layout";
export const wrapPageElement = ({ element }) => {
  return (
    <>
      <Layout>{element}</Layout>
    </>
  );
};

layout.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import PropTypes from "prop-types";
import React from "react";
  
const Layout = ({ children }) => {
    return <>{children}</>;
};
  
Layout.propTypes = {
    children: PropTypes.node.isRequired,
};
  
export default Layout;

wrapPageElement