Nextjs + Markdown + Content layer

How to install Contentlayer in nextjs?

Build an entire static blog with markdown and content layer — full support of Home, tag, search, SEO, sitemap and pagination. #series 1

The content layer is a new javascript content management library. The content layer help organise your markdown file.

Benefits of the content layer

1. Automatic type definition
2. Built-in validations
3. Caching and incremental regeneration
4. Live to reload
5. Clean code and better readability

Read more about contentlayer

• https://www.contentlayer.dev/blog/working-with-content-is-hard-for-developers
• https://www.contentlayer.dev/blog/beta

All the codes are available on GitHub Repo. You can also check the final website demo with vercel.

Steps

1. Project Setup
2. Project Structure
3. Posts And Images Dummy data
4. Pages
5. Layout
6. Home Page
7. Reading Page
8. Category Page
9. Tag Page
10. Search Page and Functionality
11. SEO
12. Sitemap
13. pagination

Note:

My project builds with javascript, and I’m not using typescript in my content layer.

In this article, we discuss only project setup and in the next articles we discussed one to ten step.

Project Setup

1. Install-package
2. Config content layer in nextjs
3. Create a contentlayer.config.js file

Install-package

The happiest news with the content layer npm package. With the content layer, you do not need gray-matter and markednpm package. The content layer itself handles all markdown functionality.

npm install -D contentlayer next-contentlayer

Config content layer in nextjs

Edit Configuration of a content layer inside nextjs. You change the code into two files.

1. next.config.js or next.config.mjs
2. tsconfig.json or jsconfig.json

next.config.js or next.config.mjs

If you use javascript in nextjs, you copy and paste the following code into your next.config.js file.

const { withContentlayer} = require('next-contentlayer')

const nextconfig = {
reactStrictMode: true,
disableImportAliasWarning: true,
... rest configation
}
module.exports = withContentlayer(nextconfig)

If you use typescript in your nextjs project. then you copy and paste the following code into your next.config.mjs file.

// next.config.mjs

import { withContentlayer } from 'next-contentlayer'

export default withContentlayer(
  { 
    ... if your have any config write here  
  }
)

Note

The code is the same for both next.config.js and next.config.mjs file.

tsconfig.json or jsconfig.json

The tsconfig.json file use for typescript and jsconfig.json file use for javascript.

If you use javascript. paste the following code into jsconfig.json

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
        "contentlayer/generated": ["./.contentlayer/generated"]
     }
 },
"include": [".contentlayer/generated"]
}

If you are using javascript. the paste the following code into tsconfig.json .

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"contentlayer/generated": ["./.contentlayer/generated"]
}
},
"include": [".contentlayer/generated"]
}

After the code, add your tsconfig.json file looks like.

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"contentlayer/generated": ["./.contentlayer/generated"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".contentlayer/generated"
],
"exclude": ["node_modules"]
}

Create a contentlayer.config.js file

At the root level, you create contentlayer.config.js file in your project and add your markdown schema and source for your markdown posts in the project.

Configuration for markdown (Default)

filePathPattern: `**/*.md`,
contentType: 'markdown',

Configuration for MDX

filePathPattern: `**/*.mdx`,
contentType: 'mdx',

For this project, I’m using markdown for our blog and my contentlayer.config.js file look.

import { defineDocumentType, makeSource, defineNestedType} from "contentlayer/source-files";
const Tag = defineNestedType(() => ({
  name: 'Tag',
  fields: {
      title: { type: 'string'},
   },
}))
const Images = defineNestedType(() => ({
  name: 'Images',
  fields: {
     title: { type: 'string', required: true },
  },
}))
const Categories = defineNestedType(() => ({
   name: 'Categories',
   fields: {
      title: { type: 'string' },
   },
}))
const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  contentType: 'markdown',
fields: {
   title: {
     type: 'string',required: true,
},
date: {
   type: 'date',
   required: true,
},
author:{
   type: 'string',
   required: true,
},
description:{
   type: 'string',
   required: true,
},
image:{
   type: 'string',
   required: true,
},
draft:{
   type: 'string',
   required: true,
},
summary:{
   type: 'string',
   required: true,
},
tags: {
   type: 'list',of: Tag,
},
images: {
   type: 'list',of: Images,
},
categories:{
   type: 'list',of: Categories,
}
},
computedFields: {
  slug: {
    type: "string",
    resolve: (doc) => doc._raw.sourceFileName.replace(/\.md/, ""),
  },
}
}))
export default makeSource({
   contentDirPath: 'posts',
   documentTypes: [Post],
})

1. In the contentDirPath, pass your posts directory path. In my case, all markdown posts are inside the posts folder.
2. In the documentTypes pass your defineDocumentType configuration.

Schema types

• https://www.contentlayer.dev/docs/reference/source-files/field-types
• https://www.contentlayer.dev/docs/reference/source-files/define-nested-type
• https://www.contentlayer.dev/docs/reference/source-files/define-document-type

Conclusion

I like the content layer for not does have an Automatic type definition, Built-in validations and Live reloading. But I’m using the content layer for Clean code, which is better readability and understandability. With the content layer, you achieve blog functionality with a few lines of code.

Suppose you read my previous series on markdown. You know I write code is a little bit messy. On the other hand, the content layer provides clean code syntax, and you can easily add other functionality to the blog.

Note

I start the entire series on the content layer with markdown in nextjs. In series, we create a full-function blog with static generation.

You can follow and read more articles on officialrajdeepsingh.dev and tag them on Twitter.

Read More content on the Nextjs. Sign up for a free newsletter and join the frontend web community on medium