Step 1: Check Transfer Eligibility

Before transferring your domain to Vercel, make sure it is at least 60 days old.

I have the following domains registered with Namecheap, and all of them are at least 60 days old as of June 14, 2025.

Prerequisites

Before getting started, ensure you have:

- A domain registered with a domain registrar (e.g. Namecheap, GoDaddy, etc.)
- Basic knowledge of DNS records and how to manage them

Step 1: Install Dependencies

Run the following command to install the required dependencies:

npm install next-mdx-remote next-mdx-remote/serialize remark-gfm remark-math rehype-slug

Step 2: Create an MDX Rendering Component

Create a new component `MDXRenderer.tsx` inside the `components` folder:

"use client";

import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import React from "react";

interface MDXRendererProps {
source: MDXRemoteSerializeResult;
}

const MDXRenderer: React.FC<MDXRendererProps> = ({ source }) => {
return <MDXRemote {...source} />;
};

export default MDXRenderer;
```

Step 3: Create an MDX Fetching Function

Next, create a helper function to serialize and fetch the MDX content in `lib/mdx.ts`:

import { serialize } from "next-mdx-remote/serialize";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";

export async function getMdxContent(content: string) {
return await serialize(content, {
mdxOptions: {
remarkPlugins: [remarkGfm, remarkMath],
rehypePlugins: [rehypeSlug],
},
});
}
```

Step 4: Implement Dynamic MDX Rendering in a Page

Now, create a dynamic page to display the MDX content. Inside `app/mdx/page.tsx`, add the following code:

import MDXRenderer from "@/components/MDXRenderer";
import { getMdxContent } from "@/lib/mdx";

const mdxContent = `
# Hello MDX

This is a sample MDX content with **bold text** and a [link](https://nextjs.org/).

> Blockquotes work too!

\`\`\`tsx
console.log("Hello, Next.js 15!");
\`\`\`
`;

export default async function MdxPage() {
const mdxSource = await getMdxContent(mdxContent);
return (
<div className="prose mx-auto p-5">
<MDXRenderer source={mdxSource} />
</div>
);
}
```

Step 5: Test the MDX Integration

Start the development server:

npm run dev

Navigate to `http://localhost:3000/mdx`, and you should see the rendered MDX content!

Conclusion

Using `next-mdx-remote`, you can load and render raw MDX dynamically in Next.js 15 with the App Router. This approach enables fetching MDX from various sources, making it ideal for blog engines, CMS integrations, and dynamic documentation sites.

Introduction

Markdown with JSX (MDX) is a powerful way to write content-rich applications in Next.js. The `next-mdx-remote` library allows us to load MDX from various sources, such as CMSs or APIs, and render it dynamically. In this tutorial, we will explore how to integrate `next-mdx-remote` in a Next.js 15 application using the App Router and load raw MDX content.

Prerequisites

Before getting started, ensure you have:

- **Node.js 18+** installed
- A Next.js 15 project set up (`npx create-next-app@latest`)
- Basic knowledge of Next.js and MDX

Step 1: Install Dependencies

Run the following command to install the required dependencies:

npm install next-mdx-remote next-mdx-remote/serialize remark-gfm remark-math rehype-slug

Step 2: Create an MDX Rendering Component

Create a new component `MDXRenderer.tsx` inside the `components` folder:

"use client";

import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import React from "react";

interface MDXRendererProps {
source: MDXRemoteSerializeResult;
}

const MDXRenderer: React.FC<MDXRendererProps> = ({ source }) => {
return <MDXRemote {...source} />;
};

export default MDXRenderer;
```

Step 3: Create an MDX Fetching Function

Next, create a helper function to serialize and fetch the MDX content in `lib/mdx.ts`:

import { serialize } from "next-mdx-remote/serialize";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";

export async function getMdxContent(content: string) {
return await serialize(content, {
mdxOptions: {
remarkPlugins: [remarkGfm, remarkMath],
rehypePlugins: [rehypeSlug],
},
});
}
```

Step 4: Implement Dynamic MDX Rendering in a Page

Now, create a dynamic page to display the MDX content. Inside `app/mdx/page.tsx`, add the following code:

import MDXRenderer from "@/components/MDXRenderer";
import { getMdxContent } from "@/lib/mdx";

const mdxContent = `
# Hello MDX

This is a sample MDX content with **bold text** and a [link](https://nextjs.org/).

> Blockquotes work too!

\`\`\`tsx
console.log("Hello, Next.js 15!");
\`\`\`
`;

export default async function MdxPage() {
const mdxSource = await getMdxContent(mdxContent);
return (
<div className="prose mx-auto p-5">
<MDXRenderer source={mdxSource} />
</div>
);
}
```

Step 5: Test the MDX Integration

Start the development server:

npm run dev

Navigate to `http://localhost:3000/mdx`, and you should see the rendered MDX content!

Conclusion

Using `next-mdx-remote`, you can load and render raw MDX dynamically in Next.js 15 with the App Router. This approach enables fetching MDX from various sources, making it ideal for blog engines, CMS integrations, and dynamic documentation sites.

How to Update Tailwind CSS to v4 in Next.js 15 App Router

Tailwind CSS just dropped version 4, and if you're using Next.js 15 with the App Router, you might be wondering how to upgrade smoothly. Don't worry—I've got you covered. Let's walk through the update step by step.

Why Upgrade to Tailwind CSS v4?

Tailwind v4 brings performance improvements, better tree-shaking, and a few breaking changes. Updating ensures your project stays up to date and benefits from the latest features and optimizations.

Step 1: Update Tailwind CSS

First, open your terminal and run the following command:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Or if you're using Yarn:

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

This will install the latest Tailwind CSS along with PostCSS and Autoprefixer.

Step 2: Update Tailwind Config

Tailwind v4 removes support for CommonJS config files, so you need to update your `tailwind.config.js` to `tailwind.config.ts`:

1. Rename `tailwind.config.js` to `tailwind.config.ts`
2. Update the file like this:

import { defineConfig } from "tailwindcss";

export default defineConfig({
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
});
```

Step 3: Update `postcss.config.js`

Tailwind v4 requires PostCSS 8+, so make sure your `postcss.config.js` file looks like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Step 4: Check for Breaking Changes

Some class names and configurations have changed. If your build breaks after updating, check the [Tailwind CSS v4 release notes](https://tailwindcss.com/docs/upgrade-guide) for any breaking changes that might affect your project.

Step 5: Restart Your Dev Server

After making these updates, restart your development server:

npm run dev

or

yarn dev

Now, your Next.js 15 project should be running with Tailwind CSS v4!

Conclusion

Updating Tailwind CSS to v4 in a Next.js 15 project with the App Router is pretty straightforward. Just update the dependencies, adjust your config files, and check for any breaking changes. Now you're all set to use the latest Tailwind features!

---