这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
参考教程Pre-rendering and Data Fetching | Learn Next.js (nextjs.org)
5创建简单的博客体系结构
我们示例中的博客文章将作为本地 markdown 文件存储在应用程序的目录中（而不是从外部数据源获取），因此我们需要从文件系统中读取数据。
在本节中，我们将完成创建从文件系统读取降价数据的博客的步骤。
创建降价文件
首先，在根文件夹中创建一个名为 posts 的新顶级目录（这与pages/posts不同）。在里面，创建两个文件：pre-rendering.md 和 ssg-ssr.md。pages/posts posts
现在，将以下代码复制到：posts/pre-rendering.md
---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---
Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
然后，将以下代码复制到：posts/ssg-ssr.md
---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---
We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
You can use Static Generation for many types of pages, including:
- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation
You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
您可能已经注意到，每个 markdown 文件的顶部都有一个元数据部分，其中包含title和date。这称为 YAML 前体，可以使用称为灰质 gray-matter的库对其进行解析。title date
安装gray-matter
首先，安装gray-matter，它允许我们解析每个md文件中的元数据。
npm install gray-matter
创建实用程序函数以读取文件系统
接下来，我们将创建一个实用程序函数，用于解析文件系统中的数据。有了这个实用程序函数，我们希望：
- 解析每个 markdown 文件并获取 title、date 和id文件名（将用作发布 URL）。dateid
- 列出索引页上的数据，按日期排序。
在根目录中创建调用的顶级目录lib。然后，在lib中，创建一个名为posts.js 的文件，并复制并粘贴以下代码：
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data,
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1;
} else {
return -1;
}
});
}
注意：
你不需要了解上面的代码在做什么来学习Next.js，功能是使博客示例起作用。但如果您想了解更多信息：
- fs 是一个 Node.js 模块，可让您从文件系统读取文件。
- path 是一个 Node.js 模块，可让您操作文件路径。
- Matter 是一个库，可让您解析每个 Markdown 文件中的元数据。
- 在 Next.js 中，lib文件夹没有像pages文件夹那样分配的名称，因此您可以将其命名为任何名称。通常约定使用 lib或 utils。
获取博客数据
现在博客数据已解析，我们需要将其添加到索引页 （pages/index.js）。我们可以使用名为getStaticProps（）的Next.js数据获取方法来实现这一点。在下一节中，我们将学习如何实现 。getStaticProps()
让我们在下一页进行！
