安裝 yaml-loader

1
npm i yaml-loader

配置 next.config.js

1
2
3
4
5
6
7
8
9
10
11
// root/next.config.js
module.exports = {
webpack: function (config) {
config.module.rules.push({
test: /\.ya?ml$/,
type: 'json',
use: 'yaml-loader'
})
return config
},
}

引入 yaml

1
2
3
4
5
6
7
8
// root/pages/example.js
import config from '../config.yaml'

export default function exmaple() {
return (
<h1>{config.title}</h1>
)
}

備註

如使用 .tsx ,請在根目建立 global.d.ts ,並輸入:

1
2
3
4
declare module '*.yaml' {
const data: any;
export default data;
}

這樣才不會發生錯誤

Enjoy coding!!