Next.js + GitHub Pages で RSS フィードを生成

概要

「RSS 用のライブラリーを pages/ の下で使えばいけるかな」と予想していたが、現実は厳しいというメモ。

背景

  • mardock のスライド一覧を他サイト(Next.js で言う他ゾーン)で表示したい

    • 今回は Vercel を使っていないでルーティングの機能はつかえない(たぶん)
    • Next.js 以外のサイトでも利用したい

  • RSS フィードを公開しておけばよいのでは？

    • 動的生成ができない場合 Next.js のビルド外でスクリプト実行が必要

参考

The programatic options above will work with the code we're going to outline in a moment. The main difference is that if you stick to using vanilla Next.js then you can run this as a separate page (e.g. 

rss.js

) and use the 

getServerSideProps()

 function to push the feed as XML content to the response object. 

We won't have that option, so we'll incorporate a separate Node command as part of our build process.

それでも Next.js で対応したい

外部スクリプトにする場合

madock(このサイト)では。

  • Marp スライドのメタ情報を読みだす処理なども必要
  • aspida を利用して型を結構作りこんでしまった

⇒ 面倒なのでできれば避けたい。

index.tsx でファイルに書き込む

フィードとしてはpbulic の下に .xml を作成できればよいはず。

  • PDF 等は [id].tsx の getStaticProps からファイルに書き出している

  • 原理的には同じ

  • ページビルドに関係ないのでは？

    • 書き出したファイル名を Props に渡しているので許して

⇒ とりあえず試してみたら出来た。

コード

export const getStaticProps: GetStaticProps = async (context) => {

  // snip

  const feedUrl = await writeFeed(
    {
      id: siteServerSideConfig.baseUrl,
      link: siteServerSideConfig.baseUrl,
      title: siteConfig.siteName,
      copyright: siteConfig.siteFeedTitle
    },
    items.contents.map(({ meta }) => meta),
    'deck'
  );

  // snip

課題

ビルド時にファイルへ書き出すので「marp-cli を Next.js から利用する」と同じような問題が発生しやすい。

  • ファイル書き込み競合の管理
  • プレビューモードでの扱い
  • サーバーのアドレス等は外部から設定する必要がある
  • そもそもビルド時にファイルへ書き出してもよい？