Cultivate Your Mind: Build a Digital Garden for Mental Health with Next.js & MDX

In our fast-paced world, finding a quiet space for reflection is more important than ever. A "digital garden" is a unique approach to personal knowledge management—it's less of a chronological blog and more of a living, evolving space for your thoughts, learnings, and reflections. Unlike a traditional blog, a digital garden is a perpetual work in progress, allowing for interconnected ideas to grow over time.

This tutorial will guide you through building a digital garden specifically for your mental health notes using Next.js and MDX. We'll create a private, serene online space where you can document your journey, connect your thoughts, and cultivate a deeper understanding of yourself.

Prerequisites:

• Basic understanding of React and JavaScript.
• Node.js and npm (or yarn) installed on your machine.
• A code editor like VS Code.

Standard note-taking apps can be rigid and linear. For mental health, our thoughts are often interconnected and don't fit neatly into a timeline. A digital garden approach, with its emphasis on non-linear connections and personal growth, offers a more intuitive way to manage this kind of personal information.

By using Next.js, we get a powerful and fast framework for building our garden. MDX (Markdown with JSX) is the real game-changer here, allowing us to embed interactive React components directly into our notes for a richer, more dynamic experience.

First, let's get our project set up. Open your terminal and run:

npx create-next-app@latest mental-health-garden

Follow the prompts, choosing TypeScript and Tailwind CSS for this project.

Once the installation is complete, navigate into your new project directory:

cd mental-health-garden

Next, we'll install the necessary packages to work with MDX:

npm install @next/mdx @mdx-js/loader @mdx-js/react gray-matter

Now, let's configure Next.js to recognize MDX files. Create a next.config.mjs file in your project's root and add the following:

// next.config.mjs
import createMDX from '@next/mdx'

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
}

const withMDX = createMDX({
  // Add markdown plugins here, as desired
})

export default withMDX(nextConfig)

This tells Next.js to treat .mdx files as pages.

What we're doing

We'll create a directory to store our mental health notes as MDX files. Each file will contain some content and "frontmatter" (metadata like title, date, and tags).

Implementation

1. Create a notes directory at the root of your project.
2. Inside the notes directory, create your first note, for example: first-reflection.mdx.
3. Add the following content to first-reflection.mdx:

---
title: 'My First Reflection'
date: '2025-12-18'
tags: ['mindfulness', 'beginnings']
---

# Embracing the Journey

This is the first entry in my digital garden. It's a space for me to plant my thoughts and watch them grow.

Today, I'm focusing on the idea of **mindfulness**. It's about being present in the moment without judgment.

I find that when I'm mindful, my anxiety tends to decrease. It's a powerful tool.

How it works

The section between the --- is the frontmatter. We'll use a library called gray-matter to parse this data. The rest of the file is standard Markdown with the potential for JSX components.

What we're doing

We'll create a dynamic route in Next.js to render our MDX notes. This means that any file we add to the notes directory will automatically become a page in our digital garden.

Implementation

1. In your app directory, create a new folder structure: notes/[slug].
2. Inside notes/[slug], create a page.tsx file. This will be our template for displaying each note.

// app/notes/[slug]/page.tsx
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { notFound } from 'next/navigation';

const notesDirectory = path.join(process.cwd(), 'notes');

export async function generateStaticParams() {
  const files = fs.readdirSync(notesDirectory);
  return files.map((filename) => ({
    slug: filename.replace('.mdx', ''),
  }));
}

export default async function NotePage({ params }: { params: { slug: string } }) {
  const { slug } = params;
  const filePath = path.join(notesDirectory, `${slug}.mdx`);

  if (!fs.existsSync(filePath)) {
    return notFound();
  }

  const source = fs.readFileSync(filePath, 'utf8');
  const { content, data } = matter(source);

  return (
    <article className="prose lg:prose-xl mx-auto p-4">
      <h1>{data.title}</h1>
      <p className="text-sm text-gray-500">
        {new Date(data.date).toLocaleDateString()}
      </p>
      <div className="mt-4">
        <MDXRemote source={content} />
      </div>
    </article>
  );
}

How it works

• generateStaticParams tells Next.js to pre-render a page for each of our notes.
• The NotePage component reads the corresponding .mdx file, parses the frontmatter and content using gray-matter, and then renders the content using MDXRemote.

What we're doing

A mental health garden should feel calm and personal. We'll use Tailwind CSS to create a clean, minimalist design and build a custom React component to embed in our MDX files for highlighting key insights.

Implementation

1. Styling: In your app/globals.css, you can define a soothing color palette and typography.
2. Custom Component: Create a components directory in your project root. Inside, create a file named Insight.tsx:

// components/Insight.tsx
import React from 'react';

const Insight = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 my-4 rounded">
      <p className="font-bold">Insight ✨</p>
      {children}
    </div>
  );
};

export default Insight;

3. To use this component in your MDX files, create an mdx-components.tsx file in the root of your project:

// mdx-components.tsx
import type { MDXComponents } from 'mdx/types';
import Insight from './components/Insight';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    Insight,
    ...components,
  };
}

Note: This file is crucial for making your components available to MDX in the App Router.

4. Now, you can use the <Insight> component in your .mdx files:

---
title: 'Mindful Moments'
date: '2025-12-19'
tags: ['mindfulness', 'anxiety']
---

# Finding Calm in the Chaos

<Insight>
  When I feel overwhelmed, taking just five deep breaths can make a world of difference.
</Insight>

What we're doing

A key feature of a digital garden is the ability to connect related ideas. We'll use Next.js's Link component to create these connections within our notes.

Implementation

1. Update your mdx-components.tsx file to override the default a tag with Next.js's Link component for internal links.

// mdx-components.tsx
import type { MDXComponents } from 'mdx/types';
import Insight from './components/Insight';
import Link from 'next/link';
import { useMemo } from 'react';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    Insight,
    a: (props) => {
      const href = props.href as string;
      if (href.startsWith('/')) {
        return <Link href={href} {...props} />;
      }
      return <a {...props} />;
    },
    ...components,
  };
}

2. Now you can link between your notes using standard Markdown syntax:

This thought connects back to my [[first-reflection]].

[first-reflection]: /notes/first-reflection

What we're doing

To make your garden navigable as it grows, we'll add a simple search functionality. We'll create an API route that returns notes matching a search query.

Implementation

1. Create an API route at app/api/search/route.ts:

// app/api/search/route.ts
import { NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const notesDirectory = path.join(process.cwd(), 'notes');

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const query = searchParams.get('q');

  if (!query) {
    return NextResponse.json({ error: 'Query parameter is required' }, { status: 400 });
  }

  const files = fs.readdirSync(notesDirectory);
  const results = files
    .map((filename) => {
      const filePath = path.join(notesDirectory, filename);
      const fileContents = fs.readFileSync(filePath, 'utf8');
      const { data, content } = matter(fileContents);

      if (
        data.title.toLowerCase().includes(query.toLowerCase()) ||
        content.toLowerCase().includes(query.toLowerCase())
      ) {
        return {
          slug: filename.replace('.mdx', ''),
          title: data.title,
        };
      }
      return null;
    })
    .filter(Boolean);

  return NextResponse.json(results);
}

2. Create a search component in components/Search.tsx to use this API route.

For a more robust search experience in a larger garden, consider using a library like fuse.js.

You've now built the foundation for a beautiful and functional digital garden for your mental health journey. This is a living project—a space for you to cultivate your thoughts, understand your emotions, and grow.

Next Steps:

• Tagging System: Create pages that list all notes with a specific tag.
• Visual Graph: Explore libraries like D3.js or React Flow to create a visual representation of how your notes are connected.
• Personalization: Continue to customize the styling to create a space that feels truly yours.

• Next.js Documentation
• MDX Documentation
• A great article on Digital Gardens