We’ll now add blog data to our app using the file system. Each blog post will be a markdown file.
posts(this is not the same as
posts, create two files:
Now, copy the following code to
--- 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.
Then, copy the following code to
You might have noticed that each markdown file has a metadata section at the top containing
date. This is called YAML Front Matter, which can be parsed using a library called gray-matter.
Now, let’s update our index page (
pages/index.js) using this data. We’d like to:
date, and file name (which will be used as
idfor the post URL).
To do this on pre-render, we need to implement
Let’s do it on the next page!