How to read mdx files from local files? What is leerob.io's 'contentlayer/generated' code?

[hearty musk]

https://github.com/leerob/leerob.io/blob/main/app/blog/[slug]/page.tsx

[native violet]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[haughty summit]

in tsconfig.json we can see that it is a paths alias to something generated at build (?) time

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

It is made somehow by this package https://github.com/contentlayerdev/contentlayer

It seems to maybe be indexing the MDX files to aid in navigation?

It uses the actual Next built-in MDX support to finally render it though https://github.com/leerob/leerob.io/blob/3038b518f3e6746a9e6f7bb790d80ece37b484f8/app/blog/[slug]/page.tsx#L110C10-L110C36

This is definitely a pretty complicated way if you want do just load some static MDX files, but a pretty good example of how to do a blog with metadata from the MDX posts like

---
title: 'Programming Portfolios'
publishedAt: '2017-02-24'
summary: 'Tips for creating a portfolio that stands out.'
---

[broken stone]

it actually still uses contentlayer to render... https://github.com/leerob/leerob.io/blob/main/app/components/mdx.tsx#L102

see contentlayer docs for how it works: [docs] [nextjs example]

[broken stone]

i would argue its actually easier as you don't need to implement your own file api

but it might require some more understanding to initially work it out (for markdown, id say better, but just pages with jsx, harder)

[haughty summit]

Yes, I concur. Not sure how I missed it.

in either case, try the built in Next MDX support first, it is pretty good

[broken stone]

@hearty musk are you there/ do you understand what minabot and I shared...

[hearty musk]

Absolutely sorry for not replying! Was Trying these as you shared thank you so much

[broken stone]

ahh yeah thats understandable

(i just wanted to make sure you didn't leave the server or give up like some do)

[native violet]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1152631478342131812 message)

[candid vigil]

contentlayer is very good when you need typed metadata for mdx files