My Favorite Way to Use Markdown in NextJS

  Рет қаралды 65,863

Josh tried coding

Josh tried coding

Күн бұрын

Пікірлер: 78
@andrevenancio
@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!
@calvincrane
@calvincrane Ай бұрын
too fast for me
@maxijonson
@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!!!
@fraincs
@fraincs 14 күн бұрын
and now contentlayer is dead
@wilonweb
@wilonweb Жыл бұрын
I don't see the tutorial ... He talk about contentLayer ?
@sudoSayak
@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.
@rhmhr
@rhmhr Жыл бұрын
What is the name of the extension you are using for snippets : fc -> functional component ?
@wowzande
@wowzande Жыл бұрын
Did you figure this out?
@felixnewray477
@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.
@A.Dalton
@A.Dalton Ай бұрын
@@felixnewray477 Yeah, but there is a "react snippets" plugins which a lot of these.
@jerbparagas3924
@jerbparagas3924 11 ай бұрын
Hi josh, does contentlayer optimizes the images in the mdx using Next/Image?
@Retrosen
@Retrosen Жыл бұрын
In the last part of declaring the components for the styling, could it be done with tailwind prose?
@PatrickHanford
@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
@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
@GabrielMartinez-ez9ue Жыл бұрын
did you find the error? I am having the same issue
@ignaciofigueroa7815
@ignaciofigueroa7815 7 ай бұрын
Hey, me too
@armantgold
@armantgold 10 ай бұрын
You still feel contentlayer is good now that it isnt being maintained?
@rrenildopereiraa
@rrenildopereiraa 6 ай бұрын
npm i contentlayer rehype-autolink-headings rehype-pretty-code rehype-slug rehype remark-gfm shiki
@franciscooteiza
@franciscooteiza 23 күн бұрын
shiki shiki shiki shiki shiki
@maverick456-33
@maverick456-33 Жыл бұрын
I recommend new ContentLayer+Notion combo for live remote update ! Manual mdx file updates suck
@franciscooteiza
@franciscooteiza 23 күн бұрын
LOL
@kayondoedward
@kayondoedward Жыл бұрын
bro we need links to these projects in the video, its hard to follow up without the source code
@deanwitcraft461
@deanwitcraft461 11 ай бұрын
Especially when we can't get it working. It's difficult to go through everything character-by-character and try to figure out why.
@avi3681
@avi3681 6 ай бұрын
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.
@christophelombart
@christophelombart 9 ай бұрын
Great ! I am looking for a nice mdx editor that can be integrated in NextJS . Do you know one ? Thanks
@nvsWhocares
@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
@conor909
@conor909 10 ай бұрын
Could this be tweaked for rendering markdown content from a server?
@letfoobar
@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
@nammdev97 Жыл бұрын
That is exactly what I wand to say
@dewedeth
@dewedeth Жыл бұрын
bro where is the repo in the description
@landolsi
@landolsi Жыл бұрын
you import Mdx Component to parse the JSON from who?
@KozaKrisz
@KozaKrisz 8 ай бұрын
Contentlayer is not compatible with Next.js version 14. ☹
@ratasobreviviendoenlascloa4847
@ratasobreviviendoenlascloa4847 8 ай бұрын
yes it's
@develop-with-faizan
@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
@MAMUT1108
@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?
@johncarraher3602
@johncarraher3602 6 ай бұрын
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
@sunilnune5681
@sunilnune5681 Жыл бұрын
Hey Josh, Do you have any Idea of Using MUI in Next Js 13.4?
@udaym4204
@udaym4204 Жыл бұрын
contentlayer is currently in beta can we use for production
@FighterJetFury
@FighterJetFury 10 ай бұрын
The authors of ContentLayer have given up on maintaining the project
@akosbalint3485
@akosbalint3485 Жыл бұрын
Is it working as well, if the content is not in mdx files but in a database?
@nisabmohd
@nisabmohd Жыл бұрын
Hi josh can u please tell the vs code theme youre using I really kinda like it
@develop-with-faizan
@develop-with-faizan Жыл бұрын
will this method work with rich text when using strapi and next 13
@saphalpantha3755
@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
@franciscooteiza
@franciscooteiza 23 күн бұрын
Astro is designed to handle situations like this seamlessly
@saman6199
@saman6199 Жыл бұрын
Thanks for awesome work mate, really appreciate it ❤
@joshtriedcoding
@joshtriedcoding Жыл бұрын
Cheers man
@marcwittwer8367
@marcwittwer8367 Жыл бұрын
Great content! Maybe you might also like the Nextra project. MDX + NextJS + Simple.
@tnnz9920
@tnnz9920 Жыл бұрын
hello josh can u make another video abaout mdx like tutorial?
@MyOwnPufferFish
@MyOwnPufferFish 5 ай бұрын
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...
@miguelyoutube100
@miguelyoutube100 Жыл бұрын
Great content! Do you have a Linkedin account, Josh? I want to recommend a video of yours on the platform.
@rithick3280
@rithick3280 Жыл бұрын
How to setup Google analytics in nextjs 13 ?
@joeyywill1234
@joeyywill1234 Жыл бұрын
Cries in astro
@nolep5555
@nolep5555 Жыл бұрын
please make project create a blog and markdown in next js like taxonomy but more simple
@agcodes
@agcodes Жыл бұрын
Fireship style yeee, now you can focus more on explaining than writing code..
@sahadpop4135
@sahadpop4135 Жыл бұрын
Thank You 🖤
@shinchima
@shinchima Жыл бұрын
Mr Josh, angled or square [ ] ?
@andrewiglinski148
@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.
@mohitchandola3435
@mohitchandola3435 Жыл бұрын
bro provide us react series pls..🤞
@wcatly
@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
@joshtriedcoding Жыл бұрын
Sounds cool, don't really get the connection between both though. Mind elaborating?
@wcatly
@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
@mcbabo1343 Жыл бұрын
@@wcatly code it your self 😂 nobody will do your job.
@rajatnaik7812
@rajatnaik7812 Жыл бұрын
Cli error on building contentlayer code: 'ERR_INVALID_ARG_TYPE'
@vitorac412
@vitorac412 Жыл бұрын
Do you discovered how to fix?
@ignaciofigueroa7815
@ignaciofigueroa7815 7 ай бұрын
Hey, me too
@raghav2032
@raghav2032 6 ай бұрын
Please tell if you found solution, it happens to me when I add `` these template strings in mdx file​@@ignaciofigueroa7815
@xya6648
@xya6648 Жыл бұрын
Bro you think we didn't notice. You just flamed all of us "For you users" (if you have any) 😭
@paglagamer8871
@paglagamer8871 9 ай бұрын
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
@wenboli2257
@wenboli2257 Жыл бұрын
😁非常有帮助
@kimbapslayer1995
@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
@nubian_goat Жыл бұрын
First 🎉😂❤
@joshtriedcoding
@joshtriedcoding Жыл бұрын
My man is way too fast
@franciscooteiza
@franciscooteiza 23 күн бұрын
Too fast for me. Dislike
@michaelmannucci8585
@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
@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
@connorwforsyth 10 ай бұрын
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?
The Better Way to Load Images
8:46
Josh tried coding
Рет қаралды 53 М.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 236 М.
Using MDX (markdown) in NextJs 13 `app` folder
23:46
Hamed Bahram
Рет қаралды 25 М.
NextJS Tutorial - All 12 Concepts You Need to Know
44:38
ByteGrad
Рет қаралды 362 М.
The Worst Tech Interview I've Ever Done
31:40
The Fullstack Bro
Рет қаралды 159
A New Drag And Drop Library For EVERY Framework
16:02
Theo - t3․gg
Рет қаралды 174 М.
Learn Prisma In 60 Minutes
59:25
Web Dev Simplified
Рет қаралды 434 М.
MDX in Next.js is Easy Now
24:16
Colby Fayock
Рет қаралды 6 М.
How to use TypeScript with React... But should you?
6:36
Fireship
Рет қаралды 948 М.
Contentlayer Makes Working with Content Easy for Developers
5:50
Contentlayer
Рет қаралды 15 М.
NextJS App Router: Learn Modern Web Development in 1 Hour
1:13:36
Josh tried coding
Рет қаралды 125 М.
sqlite-vec: Hybrid Search Event (Oct 2nd 2024)
50:06
Alex Garcia
Рет қаралды 98