この例のブログ投稿は、アプリケーションのディレクトリにローカルのマークダウンファイルとして保存されます（外部データソースからフェッチされるわけではありません）。そのため、ファイルシステムからデータを読み取る必要があります。
このセクションでは、ファイルシステムからマークダウンデータを読み取るブログを作成する手順を説明します。
まず、ルートフォルダに `posts` という新しいトップレベルディレクトリを作成します（これは `pages/posts` とは異なります）。`posts` 内に、`pre-rendering.md` と `ssg-ssr.md` の2つのファイルを作成します。
次に、次のコードを `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.
各マークダウンファイルの上部に、`title` と `date` を含むメタデータセクションがあることに気付いたかもしれません。これはYAML Front Matterと呼ばれ、`gray-matter` というライブラリを使用して解析できます。
まず、各マークダウンファイルのメタデータを解析できる `gray-matter` をインストールします。
npm install gray-matter
次に、ファイルシステムからデータを解析するためのユーティリティ関数を作成します。このユーティリティ関数では、次のことを行います。
ルートディレクトリに `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` は、各マークダウンファイルのメタデータを解析できるライブラリです。
- Next.jsでは、`lib` フォルダには `pages` フォルダのような指定された名前がありません。そのため、任意の名前を付けることができます。通常は `lib` または `utils` を使用するのが慣例です。
ブログデータが解析されたので、インデックスページ（`pages/index.js`）に追加する必要があります。これは、`getStaticProps（）` と呼ばれるNext.jsデータフェッチメソッドを使用して行うことができます。次のセクションでは、`getStaticProps（）` を実装する方法を学習します。
次のページでやってみましょう！