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

最終更新日: 2021-07-03

SSG 想定で書いてます。SSR でやると fs.readFileSync() がブロッカーになってレンダリング処理の速度が死にます

確認環境

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';

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

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

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

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

export default Biography;

非公開ファイルの読み込み

ファイルのフルパスを渡して読んでやればいけます

import * as fs from 'fs';

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

export const getStaticProps = async () => {
  const filePath = path.join(process.cwd(), 'contents/data.yaml');
  const data = fs.readFileSync(filePath).toString();

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

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

export default Biography;