{title}

![Create Simple Blog with Next.js and Markdown](/images/2020-10-22-nextjs-markdown-blog/cover.jpg) A blog where you write in Markdown and publish with minimal ceremony - no CMS, no database, no build-time API calls. This tutorial walks through exactly that: a [Next.js](https://nextjs.org/) (v9.5, the latest at time of writing) site that reads local `.md` files at build time, parses frontmatter with `gray-matter`, renders content with `react-markdown`, and generates a page per post via dynamic routing. ## What is Next.js [Next.js](https://nextjs.org/) is a production ready open source [React](https://reactjs.org/) framework that allows quick generation of both static and dynamic websites using [JAMstack](https://jamstack.org/). It provides functionalities like Pre-rendering, both SSG (Static Site Generation) and SSR (Server Side Rendering), hybrid SSG & SSR, Client-side routing, API routes, [TypeScript](https://www.typescriptlang.org/) support to name a few. ## What is Markdown [Markdown](https://en.wikipedia.org/wiki/Markdown) is a plain text formatting syntax, used to add formatting capabilities to plain text documents. ## Creating Next.js project To create a Next.js application, open the terminal and just run the following command: After, you should have a folder called `nextjs-markdown-blog`. ```bash npx create-next-app nextjs-markdown-blog cd nextjs-markdown-blog npm run dev ``` The development server starts on port 3000 by default. Open [http://localhost:3000](http://localhost:3000) from your browser and you should see the following: ![Next.js Development Server Running](/images/2020-10-22-nextjs-markdown-blog/developmentserver.png) If you see the previous window, the starter template page, it means everything went smoothly and we are ready to proceed! ## Next.js Application folder structure ![Folder Structure](/images/2020-10-22-nextjs-markdown-blog/nextjsfolderstructure.png) You should have the above folder structure. I'll not enter into details about [Next.js](https://nextjs.org/) folder structure and routing since it is not on the scope of this tutorial, but you can check the official documentation [here](https://nextjs.org/). To keep the simplicity of this article and focus on what is presented, you can delete folders `styles` and `api` under `pages`. Also, delete the first line of `_app.js` (the CSS import for the default template): ```js // delete this line: import "../styles/globals.css"; ``` That should do it for now. ## Starting Blog implementation Let's start by creating a `site.config.json` file in the root folder, so we have a unique place for website global configuration without hardcoding values on each file: ```json { "title": "My Blog", "description": "A blog about things I build and learn" } ``` Now, go to `pages/index.js` and type the following code, replacing the existing one: You should now see on [http://localhost:3000](http://localhost:3000): ![First Screen](/images/2020-10-22-nextjs-markdown-blog/app1screen.png) Let's now add a little bit of page customization using layouts, but first, let me briefly explain how [Data Fetching](https://nextjs.org/docs/basic-features/data-fetching) works on [Next.js](https://nextjs.org/): As stated in the beginning of the article, we can have two types of pre-rendering, Static Generation or Server Side Rendering. Basically we have three methods for fetching data for pre-rendering: - **_Static Generation using_** - getStaticProps: for fetching data at build time - getStaticPaths: for defining paths / routes to pre-render based on data - **_Server Side Rendering using_** - getServerSideProps: for fetching data on each request Let's then, using Static Generation strategy for our blog, inject previously defined site configurations into the page. Add the following code to `pages/index.js` This should be what we see when we navigate to our index page now: ![Second Screen](/images/2020-10-22-nextjs-markdown-blog/app2screen.png) ## Adding Blog template components We will create a new folder in the root of the project called `components`. Inside we will create 3 files `Footer.js`, `Header.js` and `Layout.js`. ```js const Footer = () => { return ; }; export default Footer; ``` ```js import Link from "next/link"; const Header = () => { return (

); }; export default Header; ``` ```js import Head from "next/head"; import Footer from "./Footer"; import Header from "./Header"; const Layout = ({ children, title, ...props }) => { return ( <> {title}

{children}

Search