Question

我使用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

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

Answer 1

不幸的是，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')

链接中描述了更多选项！

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

1 个答案: