Motivation

I've been sick this week and needed a good distraction, so why not rebuild my old Gatsby site using Next.js, MDX, Tailwind CSS, and Radix UI? I wanted to list out what libraries and resources I've found the most useful.

Libraries and references

0. nextjs-typescript-mdx-blog was an amazing reference when setting up. I copied quite a bit from this project.
1. next-mdx-remote for serializing mdx and post metadata in getStaticProps.
2. tailwindcss for styles.
3. @tailwindcss/typography for styling mdx.
4. @radix-ui and tailwindcss-radix for some pretty great component primitives.
5. framer-motion for simple filter and page transitions.
6. react-headroom for fancier header nav behavior.

nextjs-typescript-mdx-blog

I wanted to start by giving credit where it's mostly due - I referenced and copied nextjs-typescript-mdx-blog a lot while setting this project up, especially the logic for building pages using getStaticProps and getStaticPaths.

next-mdx-remote

This package enables loading mdx files with metadata and plugins in getStaticProps, hydrating templates with content at build time. It's pretty cool - I suggest checking that link to see how it's done, or referencing the project above.

tailwindcss

One of my main motivations in rebuilding this site was getting the opportunity to use tailwind a bit more, because I have always been a little skeptical of the hype. I still see value in using css modules instead, but I will save those thoughts for another day.

Tailwind was awesome for spinning something up quickly, and its baseline styles and colors are nice looking. I constantly had to reference the docs for every property (is it font-bold or text-bold?), but that time would have otherwise been spent setting up modules and applying classes, creating my own design system, etc. The ecosystem is awesome, the plugin configuration is easy and provided everything I needed, and I am happy that I used it. I still think it can look like spaghetti 🍝, but I tried to keep everything as simple as humanly possible to elminate those crazy long classnames.

Eventually, I will learn some pattern for maintaining these classnames by logical grouping with classnames or by another method. For now, it's fine.

@tailwindcss/typography

Making our lives even easier, this package allows you to apply tailwind styles to other content we don't control. In this case, that is the mdx content. This is covered in the tailwind docs here, but for our case it takes two steps:

1. add the plugin to tailwind config:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

2. wrap the mdx component with an element with the prose class:

<div className="prose dark:prose-invert">
  <MDXRemote {...source} components={components}/>
</div>

@radix-ui

I have always wanted an unopinionated library of components to build on top of so as not to have to constantly rebuild the same stuff between projects. I think this is what I've been looking for. I used it for the post filters, and the dark mode toggle as well before switching to another lib for that. So far, I am sold.

framer-motion

This is the first time I've used framer-motion, but I am in love with the interface, and the way they have simplified problems that used to be pretty time-consuming such as animating lists and page transitions.

Post filter animation

The post list animation works by wrapping each list item in motion.div and providing each with a unique key. When a filter is selected and the list changes, framer handles everything else:

// ...

posts.map((post) => {
  <motion.div
    key={post.slug}
    layout
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.25 }}
  >
    <Post post={post} />
  </motion.div>;
});

// ...

Page transitions

The page transition works in a similar way by adding the route as a key and wrapping whatever elements need to be animated:

import { motion } from "framer-motion";
import { useRouter } from "next/router";
import React from "react";


export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();

  return (
    <div>
      {/* Nav and elements that I don't want to animate here */}
      <div>oh hi I don't animate</div>

      {/* Everything I want to animate here */}
      <motion.div
        key={router.route}
        initial="pageInitial"
        animate="pageAnimate"
        variants={{
          pageInitial: { opacity: 0 },
          pageAnimate: { opacity: 1 },
        }}
      >
        <main>{children}</main>
      </motion.div>
    </div>
  );
}

react-headroom

This just keeps the nav out of the way as you scroll down, but exposes it again on scrolling up. I love little things like this, so I thought I would just shout it out. You can find an example here.