NotionAPIを使ったブログ

はじめに

はじめましてmomofuといいます。このたび自作でwebブログを作ってみたのでその備忘録も兼ねて思ったことを書きます。前々からいろんなサービスを使っては「これじゃない」と感じていた中、NotionAPIは実装、編集面でなかなか良いサービスでした。

実用性

そもそもNotionはメモやデータベース作成に特化したもので、個人的にはマークダウンエディター(記事作成)は副産物的なものだと思っていたのですが、直感的に操作しやすく、いろんなデバイスにも対応していて、多分、ものを書くことにおいては他の追随を許さない程に便利なものだと思います。

（以下非技術的な話）

• 実装のこと

• サーバーのこと

• 躓いたこと

API実装

導入部分は(Next.js（App Router） と NotionAPI で簡単なブログサイトを構築ZennZenn)を参考にしました。といっても、APIを叩いて返ってきたjsonファイルの構造からある程度わかるようになっているので一般的なAPIと大きな違いはありませんでした。ただひとつ、記事1ページの内容がマークダウンの配列で渡されたので、内容を表示する際はmap関数で展開する必要があり面倒に感じました。(なぜこのような形式なのかは理解できませんでした)

javascript
<div>  
//contentはマークダウンがいっぱい入った配列。これをmap関数で要素一つ一つに操作(表示)をしていく  
      {contents.map((content, index) => {  
        const formatteredMarkdown = content.parent.replace(/\n/g, '  \n')  
        return (  
          <div className="" key={index}>  
          //マークダウンをhtmlに変換  
            <ReactMarkdown  
              components={{  
                ol: ({ node, ...props }) => <ol className="list-decimal list-inside pb-2" {...props} />,  
                li: ({ node, ...props }) => <li {...props} />  
              }}  
            >  
              {formatteredMarkdown}  
            </ReactMarkdown>  
          </div>  
        )  
      })}  
    </div>  

サーバーのこと

next.jsで作成したアプリを自宅のubuntuサーバーにデプロイして自作ホスティングを構築しました。また、NotionAPIを使用しているもんですから外部との同期を考えないといけないので、SSGではなくISRによって定期的にAPIと自鯖とで同期を取っています。

つまずいたとこ

apiを叩くと必ずjson形式のファイルが返ってきます。しかし、これはfetch関数を使用した時に限ったこと？で、api提供者あるいは第三者の作ったライブラリを使用すると、jsonファイルを確認せずともライブラリ内で勝手に型を定義して自動的にいろいろやってくれる。だがそれゆえに、next.jsに固有のサーバーサイドの関数が使えない(実際には代替が使えた)ので、ひと手間加わり忙しかった。