Next.js (6) | 青训营笔记

41 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

参考教程Pre-rendering and Data Fetching | Learn Next.js (nextjs.org)

5创建简单的博客体系结构

我们示例中的博客文章将作为本地 markdown 文件存储在应用程序的目录中(而不是从外部数据源获取),因此我们需要从文件系统中读取数据。
在本节中,我们将完成创建从文件系统读取降价数据的博客的步骤。

创建降价文件

首先,在根文件夹中创建一个名为 posts 的新顶级目录(这与pages/posts不同)。在里面,创建两个文件:pre-rendering.mdssg-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()
image.png
让我们在下一页进行!