Next.js Discord

Discord Forum

MDX layouts not respecting line breaks.

Winters posted this in #help-forum
Open in Discord
I'm trying to achieve a uniform layout across all my pages in mdx so for that i'm using a mdx-layout.tsx file according to the nextjs documentation and then wrapping the contents of the markdown content inside the layout for all the pages. This is my layout code so far.

import { Anton } from "next/font/google";
const anton = Anton({subsets: ["latin"], weight:["400"]});

export default function MdxLayout({ children }: { children: React.ReactNode }) {
    return (
       <div className="flex flex-row h-full w-full space-x-5">
                {/* Table of contents */}
                <div className="h-full w-1/6">
                    <h1 className={`${anton.className} text-white`}>
                        Table of contents
                {/* The content */}
                <div className="flex flex-row w-full" style={{ color: 'red' }}>

And this is my mdx page

title: Hi, Test!
description: test??
tags: frameworks,development
image: react.png
slug: 2024/test
publishDate: '06-10-2024'

import MdxLayout from '@/components/mdx-layout'

export const metadata = {
  title: 'Test!',
  description: 'this is the description',
  tags: ['test', 'development'],

# Title {metadata.title}
# description {metadata.description}
# tags {metadata.tags}
You this cool?

export default function MDXPage({ children }) {
  return <MdxLayout>{children}</MdxLayout>

The thing is the markdown is being rendered in a single line, that is like this
Title Test!description this is the descriptiontags testdevelopmentYou this cool?

Like this but in a single line. how can i make the it respect the new lines that i have in my markdown file?

Answered by Winters
nvm this, just fix the width.
View full answer

1 Reply

nvm this, just fix the width.