#Next mdx remote in rsc

1 messages · Page 1 of 1 (latest)

wild wyvern
#

What is your code? A simplified version that is

#

Ah nvm

#

If the layout is a client component

late bane
#

I deleted layout

wild wyvern
#

The page becomes a client component as well

late bane
#

I have no layout for this page

#

The root layout is a server component too

wild wyvern
#

Well i need a simplified version of your code then

late bane
#

Okay

# 
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

export async function generateStaticParams() {
  const coursesResponse = await fetch('https://api.nksss.live/courses');
  const courses = await coursesResponse.json();

  return courses.data.map((course: Course) => ({
    code: course.code,
  }));
}

async function fetchCourse(code: string) {
  const courseResponse = await fetch(`https://api.nksss.live/courses/${code}`);
  return (await courseResponse.json()).data;
}

export default async function CourseInfo({ params, searchParams }: any) {
  const { code } = params;
  const course: Course = await fetchCourse(code);
  const courseContent = await serialize(course.content[0])

  return (
    <>
      <main>
        <ul>
          <li>
            <strong>Course code:</strong> {course.code}
          </li>

          <li>
            <h2>Content</h2>
            <ol>
              {course.content.map((unit: string, index: number) => (
                <li key={index}><MDXRemote {...courseContent}/></li>
              ))}
            </ol>
          </li>
        </ul>
      </main>
    </>
  );
}
#

Commenting out the Content <li> tag removes the error

#

Seems like the issue is in:

<li key={index}><MDXRemote {...courseContent}/></li>
wild wyvern
late bane
#

I see

wild wyvern
#

to workaround, wrap MDXRemote in a client component

"use client";

import { MDXRemote, MDXRemoteProps } from "next-mdx-remote";

export default function RenderMarkdown(props: MDXRemoteProps) {
  return <MDXRemote {...props} />;
}
#

then use RenderMarkdown as if it was MDXRemote

late bane
#

All right, fair enough. Thanks a ton!