The opinionated starter for your MDX + Next.js needs

---

• Installation
• Usage
• MDX w/ next-mdx-remote
• Built-in Search w/ Fuse.js
• Chakra UI -- Light + Dark Mode & Themeing
• Shoutouts
• TODO

---

Installation

We're going to apply this repo as a template to create-next-app:

npx create-next-app your-project-name -e https://github.com/domitriusclark/nextjs-mdx

or

yarn create next-app your-project-name -e https://github.com/domitriusclark/nextjs-mdx

Usage

Out of the box this template comes with:

• Local MDX examples + how to handle parsing + rendering them
• Built in input & tag search
• A growing list of components to pass to MDX and get up and running fast (thanks to Chakra UI)
• Code highlighting + built in copy functionality
• Light + Dark mode (with a persisted cookie based config)
• SEO setup
• Absolute import path config

Let's dig a bit into the tools used and where to get started in the project.

MDX w/ next-mdx-remote

To handle MDX flexibly -- mainly to allow MDX to come from any source,not just locally -- we utilize two functions from next-mdx-remote

• renderToString(source: string, components: object, options?: object, scope?: object) This function consumes a string of mdx along with any components it utilizes in the format { ComponentName: ActualComponent }. It also can optionally be passed options which are passed directly to mdx, and a scope object that can be included in the mdx scope. The function returns an object that is intended to be passed into hydrate directly.

• hydrate(source: object, components: object) This function consumes the output of renderToString as well as the same components argument as renderToString. Its result can be rendered directly into your component. This function will initially render static content, and hydrate it when the browser isn't busy with higher priority tasks.

These functions allow us to parse MDX as a source in our lifecycle methods like getStaticProps and getStaticPaths so we can statically generate content based on our MDX and finish by giving us the output from renderToString with something we can render.

// -- /pages/blog/[slug].js

import renderToString from 'next-mdx-remote/render-to-string';
import hydrate from 'next-mdx-remote/hydrate';
import fs from 'fs';
import matter from 'gray-matter';
import glob from 'fast-glob';

import Iframe from '@components/Iframe';
import Code from '@components/Code';

// Components that pass to the MDX
const components = { code: Code, Iframe };

export default ({ mdxSource, frontMatter }) => {
  // we now have the string passed from renderToString that we can turn into something we can render
  const content = hydrate(mdxSource, components);

  return (
    <div>
      <h1>{frontMatter.title}</h1>
      {content}
    </div>
  );
};

// This glob is what will be used to generate static routes
const contentGlob = 'src/blogs/*.mdx';

export async function getStaticPaths() {
  const files = glob.sync(contentGlob);

  const paths = files.map((file) => {
    const split = file.split('/');
    const filename = split[split.length - 1];
    const slug = filename.replace('.mdx', '');

    return {
      params: {
        slug,
      },
    };
  });

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params: { slug } }) {
  const files = glob.sync(contentGlob);

  const fullPath = files.filter((item) => {
    const split = item.split('/');
    const filename = split[split.length - 1];
    return filename.replace('.mdx', '') === slug;
  })[0];

  const mdxSource = fs.readFileSync(fullPath);
  const { content, data } = matter(mdxSource);

  if (!fullPath) {
    console.warn('No MDX file found for slug');
  }

  const mdx = await renderToString(content, components, null, data);

  return {
    props: {
      mdxSource: mdx,
      frontMatter: data,
    },
  };
}

Built-in Search w/ Fuse.js

A preconfigured Search component and accompanying page exist to demonstrate how you can build search easily into your site for your content. Fuse.js allows us to very easily build a fuzzy search (with a list of configurations) that we can use with Input or tag based searching.

// -- /src/components/Search.js

import React, { useState } from 'react';
import Fuse from 'fuse.js';

import { Flex, Button, Stack, Input } from '@chakra-ui/core';

const TAG_LIST = ['react', 'nextjs', 'chakra ui'];

// Configuration options for refining your fuzzy search
const fuseOptions = {
  threshold: 0.35,
  location: 0,
  distance: 100,
  minMatchCharLength: 1,
  shouldSort: true,
  includeScore: true,
  useExtendedSearch: true,
  keys: ['title', 'tags'],
};

export default function Search({ blogs, handleFilter }) {
  const [searchValue, setSearchValue] = useState('');
  const [searchTags, setSearchTags] = useState([]);

  // New instance of your search w/ the content it's searching and the options from your config
  const fuse = new Fuse(blogs, fuseOptions);

  React.useEffect(() => {
    if (searchValue === '' && searchTags.length === 0) {
      handleFilter(blogs);
    } else {
      // Allow for a search for tag
      const formattedTags = [...searchTags.map((item) => ({ tags: item }))];
      const formattedTitle = searchValue.length ? [{ title: searchValue }] : [];
      const queries = {
        $or: [
          { tags: searchValue },
          { title: searchValue },
          {
            $and: [...formattedTags, ...formattedTitle],
          },
        ],
      };
      const results = fuse.search(queries).map((result) => result.item);
      handleFilter(results);
    }
  }, [searchValue, searchTags]);

  const onChange = (e) => {
    const { value } = e.target;
    setSearchValue(value);
  };

  const onTagClick = (tag) => {
    if (searchTags.includes(tag)) {
      setSearchTags(searchTags.filter((included) => included != tag));
    } else {
      setSearchTags([...searchTags, tag]);
    }
  };

  return (
    <Flex direction="column" w={['100%', '75%', '50%']}>
      <Flex justify="space-around">
        <Stack spacing={4}>
          {TAG_LIST.map((tag) => (
            <Button onClick={() => onTagClick(tag)}>#{tag}</Button>
          ))}
        </Stack>
      </Flex>
      <Input mt={6} value={searchValue} onChange={onChange} />
    </Flex>
  );
}

Chakra UI -- Light + Dark Mode & Themeing

Using the (currently experimental) v1 of Chakra UI, there was some new conversation about how to handle persisting a theme choice, especially when utilizing static + server rendering from specifically a Next.js perspective. The solution internally was to set a cookie to persist the theme, then read from that cookie to remove any flicker.

Besides that, the component library itself comes with many goodies for things like configuring a theme, creating custom components through their Box model, and utilizing the many components / configurations given by default in Chakra UI. 🥳

If you need to make changes to the theme or config of Dark & Light mode, look at /pages/_app.js / /src/components/ThemeToggleButton / /src/hooks/useThemePersistance

Shoutouts

Wanted to highlight some projects + people that helped inspire + round out this template.

• Ryan Warner's Next.js + MDX Digital Garden
• Prince's blog
• Lee Robinson's blog

TODO

• Build out a more useful base of components to pass to our MDX
• Some tests
• Improved Lighthouse scores (currently 80+ in all, but would love to push this further)
• Examples of different CMS choices in an 'examples' directory