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:
Step 2: Create an MDX Rendering Component
Create a new component MDXRenderer.tsx
inside the components
folder:
Step 3: Create an MDX Fetching Function
Next, create a helper function to serialize and fetch the MDX content in lib/mdx.ts
:
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:
Step 5: Test the MDX Integration
Start the development server:
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.