心を耕す：Next.jsとMDXで心の健康デジタルガーデンを作る方法

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

cd mental-health-garden

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

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

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

const withMDX = createMDX({
  // 必要に応じてここにマークダウンプラグインを追加
})

export default withMDX(nextConfig)

---
title: '私の最初の内省'
date: '2025-12-18'
tags: ['マインドフルネス', '始まり']
---

# 旅を受け入れる

これは私のデジタル庭園での最初のエントリーです。これは私の考えを植えて、成長を見守るための空間です。

今日、私は**マインドフルネス**という概念に焦点を当てています。それは判断なしで瞬間に存在することについてです。

マインドフルネスであると気づいたとき、不安が軽減傾向があります。それは強力なツールです。

// 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>
  );
}

// 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">洞察 ✨</p>
      {children}
    </div>
  );
};

export default Insight;

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

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

---
title: 'マインドフルな瞬間'
date: '2025-12-19'
tags: ['マインドフルネス', '不安']
---

# 混沌の中で静けさを見つける

<Insight>
  圧倒されたと感じたとき、たった5回の深呼吸を取るだけで大きな違いを生むことができます。
</Insight>

// 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,
  };
}

この考えは[[first-reflection]]に戻ってつながっています。

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

// 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: 'クエリパラメータが必要です' }, { 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);
}