I wanted to use MDX files on my Next.js site, but I discovered that there are a lot of ways to implement MDX with Next. Since I spent a whole day r...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for this, I also ended up choosing @next/mdx as I like minimal overhead and all my needs are being met. With Next 12 this seems to be a hassle free option for now.
Thanks for reading. I'm glad you got some value out of it!
What strategy do you use for listing blog posts and site wide search ?
Option 1
I am thinking of going with creating a json file called posts.json where I will add paths manually for all MDX posts rather than doing file path scanning jugglery. This json object will have slug, path, tags, create date, author. I shall also use this along with fuze.js to filter the results.
Option 2
There is a library called glob which scans path for *.MDX files as well
For search I am thinking of using fuze.js
I have heard (not tried at all) about algolia instant search and elastic search but i am wondering do I really need external indexes ?
What are your thoughts ?
I was using markdown for a few pages, so I haven't implemented this in Next.js. I'd personally lean towards option 2 and be very careful to make sure that no one can execute a directory traversal attack.
In the past on non-Next.js sites, I've actually ingested the markdown content into a SQLite DB on application bootup and used that for searching with LIKE queries. It wasn't typo tolerant, but it was good enough for my needs. I had less than 100 posts though, and if I had upwards of 1000 it would probably slow down the application bootup.
Thanks for sharing your thoughts.
Thanks for writing this, Tyler. You're right that the current documentation is pretty unclear and it's a tough landscape to navigate. Thank you for clarifying a lot of it for us.
Quick question for you about your mdx setup: do you have a route in your site that acts like a blog homepage, which includes links to all your other mdx posts?
I am curious how to go about setting that up in a somewhat automated way with @next/mdx. Ex: a landing page that lists all the mdx posts sorted by date, then links out to each one.
Thanks!
Cam
Hey Cam,
Thanks for reading! I don't have anything like that: on my site, the only mdx pages are About, FAQ and Contact.
However, Lee Robinson recommended in a tweet that
npx create-next-app -e blogis a great way to get started with a Next-powered blog. Lee is on the Vercel team so his advice tends to be pretty solid.I'd run that command in a new directory and see how that's structured: I feel like that may have everything you need to get started.
Dude, thank you for confirming this...
"At the time of writing this (August 2021), TypeScript support is not implemented on the underlying @mdx-js/loader package. The docs say that TypeScript is supported, but the link to @mdx-js docs for @mdx-js v2.0.0-next.9 instead of the current 1.6.22 version. However, it will be supported in the version 2.0 release."
Yeah: I may have wasted a whole day trying to figure out what was going on with that 😂
Thank you for this very helpful guide! Made deciding between these quite easy.
Awesome! What did you end up choosing?