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/shadcn/taxonomy
My GitHub: github.com/joschan21
Discord: / discord
Twitter: / joshtriedcoding
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!
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!!!
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.
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?
That is exactly what I wand to say
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?
Hey Josh, Do you have any Idea of Using MUI in Next Js 13.4?
Hi josh, does contentlayer optimizes the images in the mdx using Next/Image?
Great content! Maybe you might also like the Nextra project. MDX + NextJS + Simple.
Hi josh can u please tell the vs code theme youre using I really kinda like it
Great ! I am looking for a nice mdx editor that can be integrated in NextJS . Do you know one ? Thanks
In the last part of declaring the components for the styling, could it be done with tailwind prose?
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.
Is it working as well, if the content is not in mdx files but in a database?
can you share your vscode setup some time? specifically for nextjs
Thanks for awesome work mate, really appreciate it ❤
Cheers man
I recommend new ContentLayer+Notion combo for live remote update ! Manual mdx file updates suck
Could this be tweaked for rendering markdown content from a server?
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
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
You still feel contentlayer is good now that it isnt being maintained?
will this method work with rich text when using strapi and next 13
you import Mdx Component to parse the JSON from who?
Great content! Do you have a Linkedin account, Josh? I want to recommend a video of yours on the platform.
What is the name of the extension you are using for snippets : fc -> functional component ?
Did you figure this out?
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.
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
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?
did you find the error? I am having the same issue
Thank You 🖤
hello josh can u make another video abaout mdx like tutorial?
bro where is the repo in the description
contentlayer is currently in beta can we use for production
The authors of ContentLayer have given up on maintaining the project
I don't see the tutorial ... He talk about contentLayer ?
bro we need links to these projects in the video, its hard to follow up without the source code
Especially when we can't get it working. It's difficult to go through everything character-by-character and try to figure out why.
How to setup Google analytics in nextjs 13 ?
😁非常有帮助
Cries in astro
please make project create a blog and markdown in next js like taxonomy but more simple
Contentlayer is not compatible with Next.js version 14. ☹
yes it's
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
Sounds cool, don't really get the connection between both though. Mind elaborating?
@@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
@@wcatly code it your self 😂 nobody will do your job.
bro provide us react series pls..🤞
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.
Mr Josh, angled or square [ ] ?
Fireship style yeee, now you can focus more on explaining than writing code..
Bro you think we didn't notice. You just flamed all of us "For you users" (if you have any) 😭
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
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.
First 🎉😂❤
My man is way too fast
Cli error on building contentlayer code: 'ERR_INVALID_ARG_TYPE'
Do you discovered how to fix?
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
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
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?