The Jamstack Book by Brian Rinaldi & Raymond K. Camden

Author:Brian Rinaldi & Raymond K. Camden [Brian Rinaldi]
Language: eng
Format: epub
Publisher: Manning Publications
Published: 2022-05-17T00:00:00+00:00

gray-matter—Our Markdown files will contain front matter metadata. This library will allow us to easily parse that metadata.

react-markdown—As we’ve discussed, React applications use a virtual DOM, and this library will render the Markdown within React’s virtual DOM, meaning that React will be able to properly update only the changed DOM elements.

If you’re still running your local site, you’ll need to stop it first. Next, install all three libraries:

yarn add raw-loader gray-matter react-markdown

Let’s use raw-loader first. To do this, we need to edit the Webpack configuration of our Next.js site. Webpack is a popular module bundler for building web apps that Next.js uses to bundle its JavaScript files for the browser. To edit the Webpack configuration, open next.config.js and add a new rule that looks for files with the .md extension and loads them with the raw-loader.

Listing 5.10 The Next.js configuration file at next.config.js to load Markdown files

module.exports = { env: { CHEC_PUBLIC_KEY: process.env.CHEC_PUBLIC_KEY, }, webpack: function (config) { config.module.rules.push({ test: /\.md$/, use: 'raw-loader', }); return config; }, };

Create a new file at /pages/about.js for our About page. Within the getStaticProps() method, we can use the filesystem to load the raw Markdown file from /content/ about.md. We’ll then use the gray-matter library to read raw Markdown and separate the front matter metadata from the content. We’ll pass the front matter and Markdown content as props to the page, where ReactMarkdown is used to render the Markdown as React components.

Listing 5.11 The About page that loads Markdown content at /pages/about.js

import fs from 'fs'; import Nav from '../components/nav'; import matter from 'gray-matter'; import ReactMarkdown from 'react-markdown'; export default function About({ frontmatter, content }) { return ( <div> <Nav /> <div className="content container px-5 py-24 mx-auto"> <h1>{frontmatter.title}</h1> <ReactMarkdown children={content} /> </div> </div> ); } export async function getStaticProps() { const file = fs.readFileSync(`${process.cwd()}/content/about.md`, 'utf8'); const data = matter(file); return { props: { frontmatter: data.data, content: data.content, }, }; }

As you may have guessed from the code, before this page will work, we need to create a Markdown file at /content/about.md. Placing content files in a /content folder is a typical structure of Next.js sites that load Markdown content. My about.md file is pretty simple, but feel free to experiment by adding more Markdown markup of your own:

--- title: About the Jam Store --- The Jam Store is built with: * Next.js * Commerce.js.

Let’s restart our local site using yarn dev and see our About page by clicking on the About navigation item (figure 5.11).

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.