Kultivieren Sie Ihren Geist: Ein digitaler Garten für psychische Gesundheit

In unserer schnelllebigen Welt ist es wichtiger denn je, einen ruhigen Raum für Reflexion zu finden. Ein „Digitaler Garten" ist ein einzigartiger Ansatz für persönliches Wissensmanagement – er ist weniger ein chronologischer Blog und mehr ein lebendiger, sich entwickelnder Raum für Ihre Gedanken, Erkenntnisse und Reflexionen. Im Gegensatz zu einem traditionellen Blog ist ein Digitaler Garten ein beständiges Werk in Arbeit, das es ermöglicht, dass miteinander verbundene Ideen mit der Zeit wachsen.

Dieses Tutorial führt Sie durch den Aufbau eines digitalen Gartens speziell für Ihre psychischen Gesundheitsnotizen mit Next.js und MDX. Wir werden einen privaten, ruhigen Online-Raum schaffen, in dem Sie Ihre Reise dokumentieren, Ihre Gedanken verknüpfen und ein tieferes Verständnis von sich selbst entwickeln können.

Voraussetzungen:

• Grundlegendes Verständnis von React und JavaScript.
• Node.js und npm (oder yarn) auf Ihrem Computer installiert.
• Ein Code-Editor wie VS Code.

Das Problem verstehen: Über traditionelle Notizen hinaus

Standard-Notiz-Apps können starr und linear sein. Für die psychische Gesundheit sind unsere Gedanken oft miteinander verbunden und passen nicht ordentlich in eine Zeitleiste. Ein Digitaler-Garten-Ansatz mit seinem Schwerpunkt auf nicht-linearen Verbindungen und persönlichem Wachstum bietet eine intuitivere Möglichkeit, diese Art von persönlichen Informationen zu verwalten.

Durch die Verwendung von Next.js erhalten wir ein leistungsstarkes und schnelles Framework für den Aufbau unseres Gartens. MDX (Markdown mit JSX) ist hier der eigentliche Wendepunkt, der es uns ermöglicht, interaktive React-Komponenten direkt in unsere Notizen einzubetten für ein reichhaltigeres, dynamischeres Erlebnis.

Voraussetzungen: Einrichten Ihres digitalen Gewächshauses

Zunächst richten wir unser Projekt ein. Öffnen Sie Ihr Terminal und führen Sie aus:

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

Folgen Sie den Eingabeaufforderungen und wählen Sie TypeScript und Tailwind CSS für dieses Projekt.

Sobald die Installation abgeschlossen ist, navigieren Sie in Ihr neues Projektverzeichnis:

cd mental-health-garden

Als nächstes installieren wir die erforderlichen Pakete, um mit MDX zu arbeiten:

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

Nun konfigurieren wir Next.js, um MDX-Dateien zu erkennen. Erstellen Sie eine next.config.mjs-Datei im Stammverzeichnis Ihres Projekts und fügen Sie Folgendes hinzu:

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

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

const withMDX = createMDX({
  // Fügen Sie hier bei Bedarf Markdown-Plugins hinzu
})

export default withMDX(nextConfig)

Dies teilt Next.js mit, .mdx-Dateien als Seiten zu behandeln.

Schritt 1: Ihre ersten Samen pflanzen (MDX-Notizen erstellen)

Was wir tun

Wir erstellen ein Verzeichnis zum Speichern unserer psychischen Gesundheitsnotizen als MDX-Dateien. Jede Datei enthält einigen Inhalt und „Frontmatter" (Metadaten wie Titel, Datum und Tags).

Implementierung

1. Erstellen Sie ein notes-Verzeichnis im Stammverzeichnis Ihres Projekts.
2. Erstellen Sie im notes-Verzeichnis Ihre erste Notiz, zum Beispiel: erste-reflexion.mdx.
3. Fügen Sie den folgenden Inhalt zu erste-reflexion.mdx hinzu:

---
title: 'Meine erste Reflexion'
date: '2025-12-18'
tags: ['Achtsamkeit', 'Anfänge']
---

# Die Reise annehmen

Dies ist der erste Eintrag in meinem digitalen Garten. Es ist ein Raum, in dem ich meine Gedanken pflanzen und ihnen beim Wachsen zusehen kann.

Heute konzentriere ich mich auf die Idee der **Achtsamkeit**. Es geht darum, im gegenwärtigen Moment präsent zu sein, ohne zu urteilen.

Ich finde, dass meine Angst nachlässt, wenn ich achtsam bin. Es ist ein kraftvolles Werkzeug.

Wie es funktioniert

Der Abschnitt zwischen den --- ist das Frontmatter. Wir verwenden eine Bibliothek namens gray-matter, um diese Daten zu parsen. Der Rest der Datei ist Standard-Markdown mit dem Potenzial für JSX-Komponenten.

Schritt 2: Ihre Notizen anzeigen

Was wir tun

Wir erstellen eine dynamische Route in Next.js, um unsere MDX-Notizen zu rendern. Das bedeutet, dass jede Datei, die wir zum notes-Verzeichnis hinzufügen, automatisch zu einer Seite in unserem digitalen Garten wird.

Implementierung

1. Erstellen Sie in Ihrem app-Verzeichnis eine neue Ordnerstruktur: notes/[slug].
2. Erstellen Sie innerhalb von notes/[slug] eine page.tsx-Datei. Dies wird unsere Vorlage zum Anzeigen jeder Notiz sein.

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

Wie es funktioniert

• generateStaticParams teilt Next.js mit, eine Seite für jede unserer Notizen vorzurendern.
• Die NotePage-Komponente liest die entsprechende .mdx-Datei, parst das Frontmatter und den Inhalt mit gray-matter und rendert dann den Inhalt mit MDXRemote.

Schritt 3: Eine achtsame Benutzeroberfläche mit benutzerdefinierten Komponenten erstellen

Was wir tun

Ein psychischer Gesundheitsgarten sollte sich ruhig und persönlich anfühlen. Wir werden Tailwind CSS verwenden, um ein sauberes, minimalistisches Design zu erstellen und eine benutzerdefinierte React-Komponente zu bauen, die wir in unsere MDX-Dateien einbetten können, um wichtige Erkenntnisse hervorzuheben.

Implementierung

1. Styling: In Ihrer app/globals.css können Sie eine beruhigende Farbpalette und Typografie definieren.
2. Benutzerdefinierte Komponente: Erstellen Sie ein components-Verzeichnis im Stammverzeichnis Ihres Projekts. Erstellen Sie darin eine Datei namens 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">Erkenntnis ✨</p>
      {children}
    </div>
  );
};

export default Insight;

3. Um diese Komponente in Ihren MDX-Dateien zu verwenden, erstellen Sie eine mdx-components.tsx-Datei im Stammverzeichnis Ihres Projekts:

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

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

Hinweis: Diese Datei ist entscheidend, um Ihre Komponenten für MDX im App Router verfügbar zu machen.

4. Nun können Sie die <Insight>-Komponente in Ihren .mdx-Dateien verwenden:

---
title: 'Achtsame Momente'
date: '2025-12-19'
tags: ['Achtsamkeit', 'Angst']
---

# Ruhe im Chaos finden

<Insight>
  Wenn ich mich überfordert fühle, können fünf tiefe Atemzüge den Unterschied ausmachen.
</Insight>

Schritt 4: Ihre Gedanken verknüpfen

Was wir tun

Eine wichtige Funktion eines digitalen Gartens ist die Möglichkeit, verwandte Ideen zu verbinden. Wir verwenden die Link-Komponente von Next.js, um diese Verbindungen innerhalb unserer Notizen zu erstellen.

Implementierung

1. Aktualisieren Sie Ihre mdx-components.tsx-Datei, um das Standard-a-Tag mit der Link-Komponente von Next.js für interne Links zu überschreiben.

// 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. Nun können Sie mit Standard-Markdown-Syntax zwischen Ihren Notizen verlinken:

Dieser Gedanke verbindet sich mit meiner [[erste-reflexion]].

[erste-reflexion]: /notes/erste-reflexion

Schritt 5: Eine einfache Suche implementieren

Was wir tun

Um Ihren Garten navigierbar zu machen, während er wächst, fügen wir eine einfache Suchfunktion hinzu. Wir erstellen eine API-Route, die Notizen zurückgibt, die einer Suchanfrage entsprechen.

Implementierung

1. Erstellen Sie eine API-Route unter 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. Erstellen Sie eine Suchkomponente in components/Search.tsx, um diese API-Route zu verwenden.

Für ein robusteres Sucherlebnis in einem größeren Garten sollten Sie eine Bibliothek wie fuse.js in Betracht ziehen.

Fazit

Sie haben nun die Grundlage für einen schönen und funktionalen digitalen Garten für Ihre psychische Gesundheitsreise geschaffen. Dies ist ein lebendiges Projekt – ein Raum für Sie, um Ihre Gedanken zu kultivieren, Ihre Emotionen zu verstehen und zu wachsen.

Nächste Schritte:

• Tagging-System: Erstellen Sie Seiten, die alle Notizen mit einem bestimmten Tag auflisten.
• Visueller Graph: Erkunden Sie Bibliotheken wie D3.js oder React Flow, um eine visuelle Darstellung zu erstellen, wie Ihre Notizen verbunden sind.
• Personalisierung: Passen Sie das Styling weiter an, um einen Raum zu schaffen, der sich wirklich wie Ihr eigener anfühlt.

Ressourcen

• Next.js Dokumentation
• MDX Dokumentation
• Ein großartiger Artikel über Digitale Gärten

Schnellreferenz

Häufig gestellte Fragen

F: Woher weiß ich, ob dies auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrem Arzt, um Ihre individuellen Risikofaktoren einzuschätzen und geeignete nächste Schritte zu bestimmen.

F: Was sollte ich meinen Arzt fragen? A: Gute Fragen sind unter anderem: „Was bedeuten meine Ergebnisse?", „Was sind meine Optionen?", „Welche Änderungen des Lebensstils würden helfen?" und „Wann sollte ich mich wieder melden?"

F: Gibt es Änderungen des Lebensstils, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), качественный Schlaf (7-9 Stunden), Stressbewältigung und Vermeidung von Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich zu Bildungszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie immer einen qualifizierten Arzt, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Pflege treffen. Individuelle Umstände variieren, und das, was für eine Person angemessen ist, ist möglicherweise nicht für eine andere Person geeignet.

Wenn Sie einen medizinischen Notfall haben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.