MDX Feature Showcase
Welcome to the new MoveHere content engine. This article demonstrates the powerful features we've just implemented using next-mdx-remote, rehype-pretty-code, and Tailwind Typography.
1. Custom Components
We can now embed interactive React components directly into our markdown files.
Use the info callout for helpful tips and supplementary information that adds value to the reader's journey.
Use the warning callout for things that could go wrong, like missing deadlines or forgotten documents.
Use the success callout to celebrate a step completed, like getting your BSN or signing a lease!
2. Advanced Markdown (GFM)
Thanks to remark-gfm, we now support tables and other GitHub-style markdown features.
| Feature | Support | Description |
|---|---|---|
| Tables | ✅ | Clean, responsive data grids |
| Task Lists | ✅ | Interactive-looking checklists |
| Autolinks | ✅ | Just type a URL and it works |
- Install dependencies
- Configure MDX Remote
- Write 10 more guides
3. Beautiful Code Highlighting
We use rehype-pretty-code with the github-dark theme to make our technical guides look professional.
// components/mdx-components.tsx
export const mdxComponents = {
Callout,
QuizCTA,
FAQ,
FAQItem,
};4. Enhanced Typography
The @tailwindcss/typography plugin ensures that our text is readable and follows a consistent vertical rhythm. It handles:
- Bold text and italics
Inline code snippets- External links with hover effects
- Blockquotes:
"Moving to a new country is a challenge, but with the right tools, it's an adventure."
5. Optimized Images
Standard markdown images are now automatically styled and can be optimized using the Next.js Image component if dimensions are provided.
Ready to build?
This setup allows our content team to write rich, technical, and visually engaging articles without ever touching the core application code.
6. Lead Generation Components
We can now drop call-to-action blocks anywhere in the content to drive conversion.
Default Style
Ready to start your move?
Get your custom roadmap in 2 minutes.
Custom Text Style
Unsure about your housing budget?
Our calculator helps you find the right range for your city.
Frequently Asked Questions
Frequently Asked Questions
How accurate is the relocation plan?
Our plans are based on real-time data from Dutch municipalities and housing platforms. While we provide the roadmap, always check official government sites for the most up-to-date legal requirements.
Is the Starter Kit really free?
Yes! The Starter Kit includes our master checklist and basic city guides at no cost. We only charge for premium support and "Done-For-You" services.
Can I upgrade my plan later?
Absolutely. You can start with the free version and upgrade to a Guided or Concierge package whenever you feel you need more hands-on help.