# Implementing Homepage Functionality, Adding Contentlayer Post List - Modern Next.js Blog Series #06 - Canonical: https://easonchang.com/posts/contentlayer-post-list - Date: 2022-09-21T00:00:00.000Z - Language: en - Description: Implementing homepage post list functionality using Contentlayer, displaying all Markdown articles > This article is also published at [it Help 2022 iThome Ironman Contest](https://ithelp.ithome.com.tw/articles/10295835) Let's use Contentlayer installed in the previous article to implement the homepage post list functionality, displaying all Markdown articles. Result screenshot as follows: ![Index Page Result](https://i.imgur.com/6nqq8VP.jpg) > The code changes for this article are as follows: > https://github.com/eason-dev/nextjs-tailwind-contentlayer-blog-starter/compare/day05-markdown-contentlayer...day06-index-page-bare-bone --- ## Sorting Articles, Using date-fns In the last article, we set the path for articles in `contentlayer.config.ts`. Contentlayer will read `content/posts/**/*.md`, which are all **.md** files in `content/posts/`, becoming the **allPosts** array for our use. However, Contentlayer does not guarantee the order of articles, and I wish the homepage post list to be sorted from newest to oldest. Therefore, we need to sort the article array ourselves. We will use date-fns to sort based on the date attribute of the articles. ### Installing date-fns ```shell pnpm add date-fns ``` ### Modifying contentLayerAdapter.js Import the compareDesc function from date-fns to sort allPosts, and export it as the allPostsNewToOld constant for later use in the homepage post list: ```js import { allPosts, Post } from 'contentlayer/generated'; import { defineDocumentType, defineNestedType, makeSource, } from 'contentlayer/source-files'; import { compareDesc } from 'date-fns'; # Add this export { allPosts, defineDocumentType, defineNestedType, makeSource, Post }; # Add the following export const allPostsNewToOld = allPosts?.sort((a, b) => { return compareDesc(new Date(a.date), new Date(b.date)); }) || []; ``` ## Adding the Post List to the Homepage Modify **/src/pages/index.tsx**: ```tsx import type { NextPage } from "next"; import Head from "next/head"; import Image from "next/image"; import { allPostsNewToOld, Post } from "@/lib/contentLayerAdapter"; import styles from "@/styles/Home.module.css"; export function getStaticProps() { const posts = allPostsNewToOld; return { props: { posts } }; } type Props = { posts: Post[]; }; const Home: NextPage = ({ posts }) => { return (

Create Next App

Welcome to Next.js!

Get started by editing{" "} pages/index.tsx

{posts.map((post) => (

{post.title}

{post.description}

))}

); }; export default Home; ``` ## Result Done! Use `pnpm dev` and browse the homepage, and you should see two articles displayed on the homepage, screenshot as follows: ![Index Page Result](https://i.imgur.com/6nqq8VP.jpg) ## Summary & Next Article Congratulations on successfully importing Markdown articles processed by Contentlayer and displaying them on the homepage post list! > The code changes for this article are as follows: > https://github.com/eason-dev/nextjs-tailwind-contentlayer-blog-starter/compare/day05-markdown-contentlayer...day06-index-page-bare-bone But if you click on these two articles, you will see a 404 error screen, because we have not yet implemented the article detail page. In the next article, let's implement the article detail page and display the full article content!