Thread by @delba_oliveira

Today, 4 years ago, I made my first contribution to the @nextjs docs: github.com/vercel/next.js…

Now I'm building the new docs 🤯 🫠

We migrated to App Router, addressed 1k+ comments, and created a new diagram system. Here are the tools we used, but first, Server Components:

Tools:

MDX - @contentlayerdev
Styling and Typography - @tailwindcss
Syntax Highlighting - rehype-pretty-code by @atomiksdev
Search - @algolia
Diagrams - @tldraw for quick ideas, @figma for high-fidelity designs.

Love @contentlayerdev for simplifying the MDX ecosystem! Fewer packages, and works great with Server Components and App Router (kudos to @schickling 🦸🏼)

Define your content schema & MDX Components → Get typesafe data.

Custom fields power most of our features, a rough overview:

Speed and less context switching make @tailwindcss my default for styling. Works well with Server Components and Streaming.

Bonus: `clsx` and `prettier-plugin-tailwindcss` makes writing classes even better 🙌

Use your favorite VSCode themes with rehype-pretty-code (we use Vercel colors here). Line highlighting, dark/light mode, and no runtime performance costs! Everything is done at build time.

I wrote an article about it: delba.dev/blog/next-blog…

Search is powered by @algolia. We're still working on fine-tuning it. An exciting recent discovery by @manovotny: synonyms. Try searching '404' or 'next/navigation' 🕵🏻

Bonus: Thanks to @pacocoursey's 'cmdk', we have a sleek command palette too! cmdk.paco.me 👌

@figma's components are great for React developers who think in components. I've been slowly iterating on a design system for light/dark mode diagrams.

All diagrams share styles. Now most styles can be changed with a click.

Plus cool new features such as light & dark mode, and TS/JS toggles - courtesy of @emilkowalski_'s wizardry 🧙🏻

There's a lot more to do before we wrap the bow on this one. But if there's one thing that I've learned this year, it's to ship and... iterate, iterate, iterate 🚢