Modern Routing & Build Magic

February 5, 2025

Welcome to my latest blog post! Today, we’re excited to share how my site is built using React Router v7. This modern routing library has transformed the way we handle navigation, offering a more streamlined API, improved performance, and an enhanced developer experience.

Why React Router v7?

React Router v7 introduces several improvements over previous versions, including:

  • Simplified Route Configuration: Easily define nested routes with a clean and intuitive API.
  • Enhanced Data Loading: Integrated support for data loaders helps fetch and manage data more efficiently.
  • Improved Performance: Optimized route matching and rendering lead to smoother navigations and better user experiences.

These enhancements allow us to create more dynamic and responsive applications, ensuring that my site remains robust and user-friendly.

Building the Blog with @mdx-js/rollup and Vite

My blog isn’t just about sharing insights—it’s also a showcase of modern tooling. I leverage @mdx-js/rollup and Vite to create a fast, flexible, and enjoyable development experience.

@mdx-js/rollup

@mdx-js/rollup enables us to write rich content by blending Markdown with JSX. This means we can include interactive components, dynamic data, and custom layouts right alongside our prose. The result is a blog that’s not only visually appealing but also highly interactive.

Vite

Vite is our build tool of choice due to its blazing-fast development server and efficient bundling capabilities. With Vite, we benefit from:

  • Instant Hot Module Replacement (HMR): See changes in real-time as you edit your code.
  • Optimized Build Performance: Streamlined bundling processes mean faster load times for my visitors.
  • Modern Features: Out-of-the-box support for ES modules and advanced optimizations.

A Peek Under the Hood

Below is an example of how we integrate MDX with Vite using @mdx-js/rollup:

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mdx from '@mdx-js/rollup'

export default defineConfig({
  plugins: [react(), mdx()]
})