プリレンダリング時に静的ファイルを読み込む

最終更新日: 2021-04-27

確認環境

Env	Ver
next	10.1.3
react	17.0.1
node	14.15.5
typescript	4.2.4

サンプルコード

public/ に読む込むファイルを置いて、getStaticProps() で事前読み込みしてレンダー時にデータが渡るようにしてやる

import * as fs from 'fs';
import * as yaml from 'js-yaml';

const Biography = ({ data }: { data: Bio }) => {
  console.log(data);
  return <p>aaa</p>;
};

type Bio = {
  name: string;
  favorite: string[];
};

export const getStaticProps = async () => {
  const data = yaml.load(
    fs.readFileSync('public/biography.yaml').toString()
  ) as Bio;

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data },
  };
};

export default Biography;