ファイル構成

Quick Startで作成したGatsby Appを見ると、既に追加されているStart IOファイルが確認できる。ファイルにはそれぞれ特徴がある。

フォルダ詳細

src/images

実装に必要なimageファイルを格納する。

src/components

Reactのcomponentを追加する。

src/pages

page componentを追加する。pagesフォルダは、URL構造と連動しており、ここに追加したファイルは、ルーティングフォルダに記述することなく、自動的にルーティングが割り当てられる。ページ遷移には、Gatsby組み込みのLInk APIを使うことが推奨されている。Gatsby Link APIを使うと、画面遷移の前に必要なリソースなどをプリローディングされ、サイトパフォーマンスの向上に繋がる。

gatsby-browser.js

gatsbyブラウザ実行時における、gatsbyの各種動作をカスタマイズするファイル。ブラウザで実行するプラグインをいじる時に用いるケースが多い。

gatsby-config.js

サイトのメタデータや、gatsbyで使用するプラグインの設定などを記述するファイル。

gatsby-node.js

buil時のページ生成や、Graphqlでのデータ取得、node側での各種イベント処理のフック、Gatsby Node API が提供するプラグインを使用する際に記述するファイル。

gatsby-ssr.js

build時における、Reactレンダリングの挙動を変更するファイル。

package.json

プロジェクトで使用するプラグインをパッケージ化したファイル。