My Favorite Way to Use Markdown in NextJS

[@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 ?

[@maverick456-33]

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

[@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.

[@rrenildopereiraa]

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

[@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.

[@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

[@jerbparagas3924]

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

[@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?

[@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.

[@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.

[@christophelombart]

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

[@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

[@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.

[@saman6199]

Thanks for awesome work mate, really appreciate it ❤

[@joshtriedcoding]

Cheers man

[@marcwittwer8367]

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

[@armantgold]

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

[@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

[@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.

[@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...

[@sunilnune5681]

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

[@conor909]

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

[@dewedeth]

bro where is the repo in the description

[@nisabmohd]

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

[@landolsi]

you import Mdx Component to parse the JSON from who?

[@miguelyoutube100]

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

[@tnnz9920]

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

[@udaym4204]

contentlayer is currently in beta can we use for production

[@louiscai7920]

The authors of ContentLayer have given up on maintaining the project

[@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

[@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

[@develop-with-faizan]

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

[@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

[@joeyywill1234]

Cries in astro

[@akosbalint3485]

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

[@sahadpop4135]

Thank You 🖤

[@xya6648]

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

[@KozaKrisz]

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

[@ratasobreviviendoenlascloa4847]

yes it's

[@nolep5555]

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

[@agcodes]

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

[@rithick3280]

How to setup Google analytics in nextjs 13 ?

[@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.

[@wenboli2257]

😁非常有帮助

[@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

[@mohitchandola3435]

bro provide us react series pls..🤞

[@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.

[@nubian_goat]

First 🎉😂❤

[@joshtriedcoding]

My man is way too fast

[@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

[@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?