NextJS 如何从 getStaticProps 中获取静态资产

当您在使用 Next.js 开发一个网站或应用时，您可能会需要在构建时获取静态资产，比如从文件系统或外部API获取数据来预渲染页面。getStaticProps是一个异步函数，允许你在构建时获取所需的数据，并将其作为props传递给你的页面。

以下是使用getStaticProps来获取静态资产的步骤和示例：

步骤

1. 创建一个getStaticProps函数：在你的页面组件文件中，你需要导出一个名为getStaticProps的异步函数。这个函数会在构建时运行。

2. 获取数据：在getStaticProps中，你可以执行读取本地文件、查询数据库或调用外部API等操作来获取你的静态数据。

3. 返回数据：一旦你获取到数据，你需要将其包装在一个对象中，并作为props的属性返回。

示例代码

假设我们有一个博客网站，我们想从一个本地的markdown文件中获取静态博客文章的内容：

jsx
// pages/blog/[slug].js
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import React from 'react';

const BlogPost = ({ content, title }) => {
  return (
    <article>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
};

export async function getStaticPaths() {
  const files = fs.readdirSync(path.join('posts'));

  const paths = files.map((filename) => ({
    params: {
      slug: filename.replace('.md', ''),
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // 获取markdown文件的路径
  const markdownWithMetadata = fs.readFileSync(
    path.join('posts', params.slug + '.md'),
    'utf-8'
  );

  // 使用 gray-matter 解析markdown文件中的元数据部分
  const { data, content } = matter(markdownWithMetadata);

  // 将markdown内容转换为HTML字符串（这里你可以使用remark或其他markdown转HTML的库）
  const htmlContent = someMarkdownToHtmlFunction(content);

  // 返回获取的数据
  return {
    props: {
      title: data.title,
      content: htmlContent,
    },
  };
}

export default BlogPost;

在上面的例子中，我们首先使用fs和path模块读取markdown文件。然后，我们使用gray-matter库来解析文件内容和元数据。最后，我们将markdown内容转换为HTML字符串，并将标题和内容作为props返回给页面组件。

这个页面会在构建时生成，并且每个博客文章的内容都会在构建时被读取和转换，然后被缓存为静态资产。当用户在浏览器中请求特定的博客文章页面时，Next.js会提供该静态页面，实现快速加载和优秀的性能表现。