🔨

Next.js で静的な YAML ファイルを読み込む方法メモ

2024/01/23に公開

Next.js

YAML

tech

DB を叩くでもなく、プロジェクトフォルダにある YAML を読み込んで参照する方法です。
↓こんな感じのフォルダ構成のときに、test.yamlの中身をpage.tsxで読み込む方法です。

app/
├─ contents/
│  └─ test.yaml
└─ src/
   └─ app/
      └─ page.tsx

~~js-yamlやjs-yaml-loaderが動かなくてキレた人向け~~

↓コードは↓

やること

YAML パーサーを入れる
npm install yaml
next.config.mjs を編集する（参考: https://webpack.js.org/guides/asset-modules/）

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.y?aml$/,
      type: 'asset/source',
    })
    return config
  },
};

読み込む

/contents/test.yaml

- "ほげ"
- "ふが"
- "ぴえん"

import YAML from 'yaml'

const test_yaml = require('/contents/test.yaml') as string
const test_list = YAML.parse(test_yaml)

export default function LoadYaml() {
  return <ul>{
    test_list.map((v: string, i: number) => <li key={'li-'+i}>{v}</li>)
  }</ul>
}

ちょっとだけ補足

webpack の設定で、好きな拡張子のファイルをasset/sourceで読み込む風にすると、require(filepath)でソースコード内で読み込めるようになる。
あとはそれを、YAML パーサーに渡してやればデータが読み込める。同じ感じで、CSV とかもいける。
fsで読み込んだりすると、getStaticPropsとかで読み込む必要があって、静的サイトジェネレーターとして運用するときにめんどくさい。

やること

ちょっとだけ補足

Discussion