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:

plaintext

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

veya npm ile:

plaintext

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:

TypeScript

// 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

plaintext

# 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:

📝Not

src dizini kullanmıyorsanız direkt root dizine oluşturmalısınız. Örneğin app/mdx-components.tsx gibi.

plaintext

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

plaintext

pnpm add sugar-high

veya npm ile:

plaintext

npm install sugar-high

✦

6. Örnek Globals CSS Düzenlemesi

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

plaintext

@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:

plaintext

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:

plaintext

# İ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:

plaintext

 
# 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)

YouTube

Konuyu video anlatımıyla da takip edebilirsin.

Videoyu izle →

✦

Ek Kaynaklar:

Next.js App Router + MDX Dokümantasyonu

MDX Resmi Sitesi

✦

1. Gerekli Paketlerin Kurulumu

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

plaintext

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

veya npm ile:

plaintext

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:

TypeScript

// 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

plaintext

# 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:

📝Not

src dizini kullanmıyorsanız direkt root dizine oluşturmalısınız. Örneğin app/mdx-components.tsx gibi.

plaintext

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

plaintext

pnpm add sugar-high

veya npm ile:

plaintext

npm install sugar-high

✦

6. Örnek Globals CSS Düzenlemesi

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

plaintext

@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:

plaintext

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:

plaintext

# İ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:

plaintext

 
# 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)

YouTube

Konuyu video anlatımıyla da takip edebilirsin.

Videoyu izle →

✦

Ek Kaynaklar:

Next.js App Router + MDX Dokümantasyonu

MDX Resmi Sitesi

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

1. Gerekli Paketlerin Kurulumu

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

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

4. MDX Components Bileşenini Oluşturun

5. Highlight İçin Gerekli Paketi Kurun

6. Örnek Globals CSS Düzenlemesi

7. Layout Bileşenini Düzenleme

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

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

Yorumlar

Benzer yazılar

Next.js Form Validasyon Yöntemleri: Client ve Server Side Doğrulama Rehberi

Next.js use cache: React Server Components için Yeni Cache Sistemi

Typescript ile Tip Güvenli Geliştirme

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

1. Gerekli Paketlerin Kurulumu

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

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

4. MDX Components Bileşenini Oluşturun

5. Highlight İçin Gerekli Paketi Kurun

6. Örnek Globals CSS Düzenlemesi

7. Layout Bileşenini Düzenleme

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

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

Yorumlar

Benzer yazılar

Next.js Form Validasyon Yöntemleri: Client ve Server Side Doğrulama Rehberi

Next.js use cache: React Server Components için Yeni Cache Sistemi

Typescript ile Tip Güvenli Geliştirme