NextJS: ContentLayer Makes Markdown GLOW Up!

NextJS is a great tool for creating websites. However, just like React used to be with state management, Next JS doesn’t care how you provide content to it. And there are many different possibilities. There are loads of Content Management Systems (or CMSs) that have been created to solve that very problem.
But if you’re a solo developer or a small team, you don’t need to pay for an external service. There is a better solution, and that solution is Markdown.
Allow me to explain:
1. Why I use Markdown with NextJS (and why it might be a good idea for you, too if you use NextJS)
2. What problems I encountered when working with Markdown
3. And how I use a tool called ContentLayer to solve these problems
Let’s dive in !
-----------
Resources:
ContentLayer : contentlayer.dev/
ShadCN's Taxonomy Repo : github.com/shadcn-ui/taxonomy
My Website : kodaps.dev/en/
Sign up for my newsletter: www.kodaps.dev/en/newsletter
#nextjs #markdown #backend

[@adamchovanec5010]

Thanks for introducing me to the library! I too have a markdown blog and I parse the files on my own on buildtime. I need to take a look at the library.

[@felemeria]

Looking forward to more details about this process. Interested in seeing an end-to-end demo if possible. I have been looking for a similar tool, so this is intriguing.

[@artu-hnrq]

Great review!

[@AtashiKawa]

Wooo really loved the explanation, however already have a system implemented and will have to make some mapping whit the data & components instead

[@itsmemylovs9124]

hi, does Contentlayer support Next 14?

[@steadycursor]

Hey. Great video, I like your approach. I've recently found easier ways to get typesafe markdown files via library zod-matter. It still fetches data from the drive, not pregenerated like you are mentioning, but still, seems pretty straigtforward way to do it if you are starting out and want to be sure that you do not have any spelling errors in your code. Few days ago I published video (Unlocking Typesafe Markdown with Next.js & TypeScript) on this topic, I would love to hear what you think about this approach.

[@utkuhaydanli]

Is there a way to add multi language support to Content Layer supported blog articles? (in Nextjs 14 App router specifically)

[@KodapsAcademy]

I actually use ContentLayer for my (multi language) blog, but the multilanguage part is not specific to ContentLayer, I simply store the alt language link in the FrontMatter and use that to switch languages

[@utkuhaydanli]

thanks a lot@@KodapsAcademy very helpful

[@Munk-tt6tz]

Thanks for the overview and information. However, It looks like content layer library hasn't been maintained for a while, and even their docs pages don't work, therefore I'm not sure if it's safe to use it

[@nicolaime1907]

Do you know something similar?

[@KodapsAcademy]

The problem is that the maintainer’s company was purchased by a bigger company and he now does not have the means to spend time on it.
I don’t know of any good alternatives just yet.

[@Munk-tt6tz]

@@nicolaime1907 Not really, for now I decided to do with Astro.js as it suffices for my needs