コンテンツにスキップ

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

最終更新日: 2021-04-27

確認環境

Env Ver
next 10.1.3
react 17.0.1
node 14.15.5
typescript 4.2.4

サンプルコード

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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;