My Favorite Way to Use Markdown in NextJS

Markdown is so nice for building fast, static pages. It has so many use cases too. Blog? Legal pages? Course content? Markdown or MDX (React components inside of markdown) got your back. This is by far the coolest way to use Markdown inside of your NextJS project I've ever seen.
Repo I learned this from: github.com/sha...
My GitHub: github.com/jos...
Discord: / discord
Twitter: / joshtriedcoding

[@andrevenancio]

Just wanted to share that I'm quite happy I came across your channel (when I was looking at NextJS 13 content a couple of days ago). You explain things quite well and clearly!

[@maxijonson]

The algorithm is strong, I found your video while taking a break from implementing MDX in my NextJS app 😂 Went back, scrapped the whole thing and used your way which was much more simple and TYPE-SAFE!!!

[@wilonweb]

I don't see the tutorial ... He talk about contentLayer ?

[@rrenildopereiraa]

npm i contentlayer rehype-autolink-headings rehype-pretty-code rehype-slug rehype remark-gfm shiki

[@sudoSayak]

Good Explanation. I just want to know is there any way to add the mdx from db side ? I mean I want to have a blog frontend and CMS to push new blogs.

[@maverick456-33]

I recommend new ContentLayer+Notion combo for live remote update ! Manual mdx file updates suck

[@rhmhr]

What is the name of the extension you are using for snippets : fc -> functional component ?

[@wowzande]

Did you figure this out?

[@felixnewray477]

It is custom defined User Snippets in Vs Code : 1. Open Vs Code 2. Go to Settings > User Snippets > Give a new name for you snippet or Type ` Functional Component -Ts > Enter > Paste This : { "new Function Component": { "prefix": "fc", // ⬅ String to be entered into the editor for snippet call "body": [ //⬅ The string to be inserted. To enter multiple lines, write an array. "import { FC } from 'react';", "", "interface ${1:$TM_FILENAME_BASE}Props {};", "", "const ${1:$TM_FILENAME_BASE}: FC = ({}) => {", " return $2 ;", "};", "", "export default ${1:$TM_FILENAME_BASE};" ], "description": "Template of new FC", } } 3. Save and Exit Note : Anything you write in the prefix is the keyword to use the snippet.

[@kayondoedward]

bro we need links to these projects in the video, its hard to follow up without the source code

[@deanwitcraft461]

Especially when we can't get it working. It's difficult to go through everything character-by-character and try to figure out why.

[@johncarraher3602]

Anyone else run into a problem actually rendering the MDX? Mine is able to display my file contents but doesn't stylize things like headers properly

[@nvsWhocares]

Well explained. Should've used a heading or a codeblock in the markdown after you set up everything for a "wow" effect . You cheated yourself out of it :D

[@Retrosen]

In the last part of declaring the components for the styling, could it be done with tailwind prose?

[@PatrickHanford]

Anywhere you can use CSS you can use Tailwind using the @apply directive, however, this is also done at build, not runtime, so as long as your generated HTML contains the class tags, it'll be evaluated the same in the browser.

[@ivuga1800]

I've got this error: TypeError: The "code" argument must be of type number. Received an instance of Object then pnpm contentlayer build. What should I look for?

[@GabrielMartinez-ez9ue]

did you find the error? I am having the same issue

[@ignaciofigueroa7815]

Hey, me too

[@armant11]

You still feel contentlayer is good now that it isnt being maintained?

[@avi3681]

Thanks for the video. Regarding the type safety does content layer validate that the required fields are present in the front-matter of the .mdx files at build time? If not it would be pretty misleading to call it type safe since the properties of the Doc type might be missing in the actual front-matter data.

[@jerbparagas3924]

Hi josh, does contentlayer optimizes the images in the mdx using Next/Image?

[@letfoobar]

I've been using contentlayer since your video about ShadCN's Taxonomy project (that is where I found it) and I absolutely love it. By the way, do you have any similar Nextjs repos to recommend?

[@nammdev97]

That is exactly what I wand to say

[@dewedeth]

bro where is the repo in the description

[@marcwittwer8367]

Great content! Maybe you might also like the Nextra project. MDX + NextJS + Simple.

[@MyOwnPufferFish]

Coming from the world of Astro and Nuxt Content, this is such a headache to setup. NextJs should really implement something similar out of the box or as an official plugin because this feels like just a lot of hassle for something quite simple...

[@saman6199]

Thanks for awesome work mate, really appreciate it ❤

[@joshtriedcoding]

Cheers man

[@KozaKrisz]

Contentlayer is not compatible with Next.js version 14. ☹

[@ratasobreviviendoenlascloa4847]

yes it's

[@resxurrection9846]

can you share your vscode setup some time? specifically for nextjs

[@MAMUT1108]

Great content. I am writing a blog website (i am new in coding) I just have a concern about plugins. This plugins can stop working?

[@landolsi]

you import Mdx Component to parse the JSON from who?

[@develop-with-faizan]

I was using strapi and next 13 I can't render bullet list and quotes using React Markdown can you tell why and how to solve that please

[@conor909]

Could this be tweaked for rendering markdown content from a server?

[@udaym4204]

contentlayer is currently in beta can we use for production

[@louiscai7920]

The authors of ContentLayer have given up on maintaining the project

[@sunilnune5681]

Hey Josh, Do you have any Idea of Using MUI in Next Js 13.4?

[@christophelombart]

Great ! I am looking for a nice mdx editor that can be integrated in NextJS . Do you know one ? Thanks

[@akosbalint3485]

Is it working as well, if the content is not in mdx files but in a database?

[@nisabmohd]

Hi josh can u please tell the vs code theme youre using I really kinda like it

[@rajatnaik7812]

Cli error on building contentlayer code: 'ERR_INVALID_ARG_TYPE'

[@vitorac412]

Do you discovered how to fix?

[@ignaciofigueroa7815]

Hey, me too

[@raghav2032]

Please tell if you found solution, it happens to me when I add `` these template strings in mdx file​@@ignaciofigueroa7815

[@develop-with-faizan]

will this method work with rich text when using strapi and next 13

[@saphalpantha3755]

hey i have an idea. i need to create blog project. all the blog content are stored as mdx in github repo of same project. and i want to render mdx in screen. so. and for crud. i have simple cms. which for creation i will build form and after submitting the form the form data is then converted into markdown file and uploaded to that repo. hence this works for update delete. Is this is efficient way??? . I want to make fully dynamic blog posts

[@tnnz9920]

hello josh can u make another video abaout mdx like tutorial?

[@rithick3280]

How to setup Google analytics in nextjs 13 ?

[@edirodriguezsantillana]

Great content! Do you have a Linkedin account, Josh? I want to recommend a video of yours on the platform.

[@nolep5555]

please make project create a blog and markdown in next js like taxonomy but more simple

[@sahadpop4135]

Thank You 🖤

[@joeyywill1234]

Cries in astro

[@agcodes]

Fireship style yeee, now you can focus more on explaining than writing code..

[@andrewiglinski148]

ahhhhhhh dude I could kiss you right now but the fact that you look like you're 14 makes that even weirder. I've been working with jupyter a ton after going back to my formal education in physics after working as a developer for the past 8 years and I sooo regret not exploring this further sooner. Contentlayer was that missing piece I was missing for sure.

[@wcatly]

Hey josh, can you make a QR code menu app or something with clerk? I like your videos 🎉 and I would like to see long tutorials m8

[@joshtriedcoding]

Sounds cool, don't really get the connection between both though. Mind elaborating?

[@wcatly]

@@joshtriedcoding Exactly, there will be a Dashboard, the restaurant owner will be able to add categories etc. from there and we will add auth to this panel with clerk

[@mcbabo1343]

@@wcatly code it your self 😂 nobody will do your job.

[@shinchima]

Mr Josh, angled or square [ ] ?

[@paglagamer8871]

Rather than doing all that shit, i will just create a component as a template and make a page all the docs page static instead of dynamic, cause i only need few pages

[@xya6648]

Bro you think we didn't notice. You just flamed all of us "For you users" (if you have any) 😭

[@mohitchandola3435]

bro provide us react series pls..🤞

[@wenboli2257]

😁非常有帮助

[@nubian_goat]

First 🎉😂❤

[@joshtriedcoding]

My man is way too fast

[@kimbapslayer1995]

I think Astro is better use case if you intend to center your site around markdown. You literally just got up an Astro project, and just build a posts directory and you’re ready to roll.

[@michaelmannucci8585]

Hmm, i just get 404 page, though I am not using /app likke you, but /src/pages. Blog stuff is at /src/pages/blog/helloworld.mdx and /src/pages/blog/[slug]/page.tsx

[@laurens2562]

I know this is a month old but your page should be named index.tsx rather than page.tsx. alternatively, you could just remove the [slug] folder and name your file [slug].tsx and place it inside the blog folder

[@connorwforsyth]

I was having a similar issue with the app router, and realised that my slugAsParams wasn't generating / setup correctly through contentlayer.config.js. If you're still looking at it, maybe take a look there?