Next.js App Router ile MDX Kullanımı: Adım Adım TypeScript Rehberi

MDX, Markdown dosyalarında React bileşenleri kullanmanıza olanak tanır. Next.js'in yeni App Router mimarisi ve TypeScript ile MDX desteğini projeye nasıl ekleyeceğinizi adım adım anlatıyorum.

1. Gerekli Paketlerin Kurulumu

Öncelikle, projenize MDX desteği eklemek için gerekli paketleri yükleyin:

pnpm add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

veya npm ile:

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

2. next.config.js veya next.config.mjs Ayarları

App Router ile MDX desteği için Next.js konfigürasyonunuzu aşağıdaki gibi ayarlayın:

// next.config.ts
import type { NextConfig } from "next";
import createMDX from "@next/mdx";

const nextConfig: NextConfig = {
	pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({});

export default withMDX(nextConfig);

3. MDX Dosyalarını app/ İçinde Kullanmak

app/ klasöründe bir .mdx dosyası oluşturun. Örneğin:

app/page.mdx

# Welcome to my MDX page!

This is some **bold** and _italics_ text.

This is a list in markdown:

- One
- Two
- Three

Checkout my React component:

```javascript
console.log("Hello, MDX!");
-```

4. MDX Components Bileşenini Oluşturun

Next-MDX kullanımında, MDX dosyalarınızda React bileşenlerini kullanmak için bir bileşen oluşturmanız gerekir. Örneğin:

src/mdx-components.tsx:

import Link from "next/link";
import React, { ComponentPropsWithoutRef } from "react";
import type { MDXComponents } from "mdx/types";
import { highlight } from "sugar-high";

const components = {
  h1: (props: any) => (
    <h1 className="text-3xl font-bold mb-4" {...props}>
      {props.children}
    </h1>
  ),
  code: ({ children, ...props }: ComponentPropsWithoutRef<"code">) => {
    const codeHTML = highlight(children as string);
    return (
      <code
        dangerouslySetInnerHTML={{ __html: codeHTML }}
        {...props}
      />
    );
  },
};

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

5. Highlight İçin Gerekli Paketi Kurun

pnpm add sugar-high

veya npm ile:

npm install sugar-high

6. Örnek Globals CSS Düzenlemesi

app/globals.css dosyanıza aşağıdaki stilleri ekleyin:

@import "tailwindcss";

@theme {
  --font-family-sans: "Inter", sans-serif;
}

:root {
  --sh-class: #7aa2f7;
  --sh-sign: #89ddff;
  --sh-string: #9ece6a;
  --sh-keyword: #bb9af7;
  --sh-comment: #565f89;
  --sh-jsxliterals: #7aa2f7;
  --sh-property: #73daca;
  --sh-entity: #e0af68;
}

html {
  min-width: 360px;
  scrollbar-gutter: stable;
}

body {
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

pre {
  background-color: #16161e;
  border-radius: 0.5rem;
  overflow-x: auto;
  padding: 1rem;
  margin: 1.5rem 0;
  line-height: 1;
}

pre::-webkit-scrollbar {
  display: none;
}

pre {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

code {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 14px;
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  background-color: var(--color-gray-100);
}

pre code {
  background-color: transparent;
  padding: 0;
  border: none;
  font-size: 14px;
  line-height: 1.5;
}

pre code > span .sh__token--identifier {
  color: white !important;
}

code:not(pre code) span {
  font-weight: 500;
  color: black !important;
}

@media (prefers-color-scheme: dark) {
  code {
    font-family: "Poppins", "Monaco", "Courier New", monospace;
    font-size: 14px;
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
    background-color: var(--color-zinc-800);
  }

  code:not(pre code) span {
    color: var(--color-zinc-100) !important;
  }
}

pre code span {
  font-weight: 500;
}

hr {
  color: var(--color-gray-200);
}

/* Remove Safari input shadow on mobile */
input[type="text"],
input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

table {
  display: block;
  max-width: fit-content;
  overflow-x: auto;
  white-space: nowrap;
  text-align: left;
}

7. Layout Bileşenini Düzenleme

app/layout.tsx dosyanızı aşağıdaki gibi düzenleyin:

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";

const font = Poppins({
  variable: "--font-poppins",
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${font.variable} antialiased`}>
        <div className="min-h-screen flex flex-col justify-between pt-0 md:pt-8 p-8 dark:bg-zinc-950 bg-white text-gray-900 dark:text-zinc-200">
          <main className="max-w-[60ch] mx-auto w-full space-y-6">
            {children}
          </main>
        </div>
      </body>
    </html>
  );
}

8. İlk Blog Yazınızı Oluşturun

app/blog/first-post/page.mdx dosyasını oluşturun ve aşağıdaki içeriği ekleyin:

# İlk Blog Yazım
Bu, MDX ile oluşturduğum ilk blog yazım. MDX sayesinde Markdown ve React bileşenlerini bir arada kullanabiliyorum.

# h1 bileşeni
```tsx
Kod bölümü
-```

9. Anasayfanızdan Blog Yazılarına Bağlantı Verin

app/page.mdx dosyanızı aşağıdaki gibi düzenleyin:

# Welcome to my MDX page!

This is some **bold** and _italics_ text.

This is a list in markdown:

- One
- Two
- Three

Checkout my React component:

```javascript
console.log("Hello, MDX!");
-```

[My First Blog](blog/first-post)

Ek Kaynaklar:

• Next.js App Router + MDX Dokümantasyonu
• MDX Resmi Sitesi