在 NextJs 的服务器端代码中访问静态资源?

Access static resource in server-side code in NextJs?

我使用 NextJS 的静态渲染功能来生成我网站的静态版本,因此我想确保在页面的第一次渲染时提供正确渲染所需的所有数据。

我有许多博客文章,我已将它们存储为 /static 中的 .md 文件,并希望在页面中访问它们,例如:

import * as fs from "fs";
...

export default class extends React.Component<IProps, any> {

  static async getInitialProps (props: IServerProps) {
    const post = (await getDb()).posts.find(p => p.id == props.query.id);
    const markdown = fs.readFileSync(`/static/posts/${post.markdownFileName}`);
    return { post, markdown }
  }
...

但是如果尝试 运行 以上我会得到以下错误:

This dependency was not found: * fs

所以我不确定在服务器上应该如何访问这些静态资源..

不幸的是 Next.js 不允许使用 webpack 加载器来处理服务器上的不同文件类型(尽管它们用于构建客户端包),但可以使用 Babel插入。可以在这里找到一个这样的 Markdown 内容插件:https://www.npmjs.com/package/babel-plugin-markdown

.babelrc配置后:

{
  "plugins": ["markdown"]
}

可以使用markdown.require()拉入.md内容:

const html = markdown.require('./foo.md')

link!

中描述了更多选项