Writing with MDX

Guide | January 2, 2024

Writing with MDX

MDX lets you use React components directly in your Markdown. next-log comes with several built-in components you can use right away.

Timeline

The Timeline component is great for showing project milestones, changelogs, or step-by-step processes. Click any item to expand it.

Project Kickoff

Defined the scope and set up the repository.

Beta Launch

Shipped the first version to early testers.

v1.0 Release

Stable release with full documentation.

FileTree

Use the FileTree component to display project structures. Folders can be expanded and collapsed.

index.mdx

index.ts

Timeline.tsx

FileTree.tsx

layout.tsx

page.tsx

next-log.config.ts

package.json

Code Blocks

Fenced code blocks support syntax highlighting for many languages. Just specify the language after the triple backticks.

TypeScript / React

Greeting.tsx

interface Props {
  name: string;
  count?: number;
}

export function Greeting({ name, count = 0 }: Props) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You have visited {count} times.</p>
    </div>
  );
}

CSS

styles.css

.container {
  max-width: 768px;
  margin: 0 auto;
  padding: 2rem;
}

@media (prefers-color-scheme: dark) {
  .container {
    background: #1a1a2e;
    color: #eaeaea;
  }
}

Terminal Commands

Terminal

# Create a new post
npm run new-post "my-post-title"

# Start the dev server
npm run dev

# Build for production
npm run build

JSON

package.json

{
  "name": "my-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Line Highlighting

You can highlight specific lines in any code block by adding {lines} after the language:

{3} — highlight line 3
{1,4} — highlight lines 1 and 4
{2-5} — highlight lines 2 through 5
{1,3-5,8} — combine individual lines and ranges

Adding Your Own Components

You can create custom MDX components and register them in app/components/mdx/index.ts:

app/components/mdx/index.ts

import { Timeline, TimelineItem } from "./Timeline";
import { FileTree, Folder, File } from "./FileTree";
import { MyComponent } from "./MyComponent"; // your custom component

export const mdxComponents = {
  Timeline,
  TimelineItem,
  FileTree,
  Folder,
  File,
  MyComponent, // register it here
};

Once registered, use it in any .mdx file without imports:

<MyComponent prop="value">
  Content goes here.
</MyComponent>