Tech Blog

最近の開発
2023-05-07
Gatsby 建築マップ

🐷Gatsby / Notion / Leaflet で地図アプリを開発

成果

NotionをCMSとして活用した地図アプリを構築

  • https://app.kenchiku.trade/

技術構成
  • Gatsby / Notion API / Leaflet

開発手順
  • Gatsbyを導入 
npm init gatsby

  • 以下のようにNotion APIを設定 
# gatsby-config.ts
{
      resolve: `gatsby-source-notion-api`,
      options: {
        token: process.env.TOKEN,
        databaseId: process.env.DATABASE_ID,
        propsToFrontmatter: true,
        lowerTitleLevel: true,
      },
  }

  • Graph QLでNotionのデータを取得 
const data = useStaticQuery(graphql`
 ...
`)

所感

半日ほどで出来たので満足でした。

gatsby-configのpluginが便利でした。

それ以外は今の所、Reactと変わらなく、学習コストが

Gatsby 建築マップ