00:00:02 To render the content of the question, we'll have to render the markdown that users submitted when creating a question.

00:00:08 And for that, we'll use a library called Next MDX Remote, which is a set of light utilities allowing MDX to be loaded within GetStaticProps or GetServerSideProps,

00:00:20 or I'm going to show you how to do it in the newer versions of Next.js as well.

00:00:25 So let's go ahead and install it by running npm install nextmdxremote.

00:00:30 I'll do it right here in a second terminal.

00:00:34 And unlike typical MDX setups that require .mdx files directly within your project, Next MDX Remote makes it possible to load and render MDX dynamically

00:00:46 at runtime.

00:00:47 And alongside rendering the MDX content, we'll also need a tool to highlight the code written in that MDX format.

00:00:54 And for that, we'll use syntax highlighting.

00:00:57 to get these nice looking code blocks directly within our question details.

00:01:02 You can install it very simply by saying npm install bright.

00:01:06 Once that is done, let's head over into the components folder, head over into the editor, and create a new file called preview.tsx.

00:01:17 Within it, run RAFCE.

00:01:20 And then we can import that preview within our question details page.

00:01:24 So that is the question ID page, this one right here.

00:01:27 And where we say preview content, we can now import the preview component coming from components, editor, preview.

00:01:35 So if we head back, you should just be able to see preview, which is good.

00:01:38 And now let me teach you how we can implement this MDX remote to load our content.

00:01:43 Instead of simply copying this example that uses the old get static props, I'll teach you how to approach it in a new way.

00:01:51 So, first things first, let's import code coming from Bright, which will allow us to render the code with syntax highlighting.

00:02:01 And let's import MDX Remote coming from Next-mdx-remote forward slash rsc for React Server components.

00:02:14 Next, we can define the code theme by saying code.theme And pass an object where we can say light, we'll use github-lighttheme.

00:02:24 For dark, we'll use github-darktheme.

00:02:28 And for the light selector, we'll make it html.light.

00:02:34 These two are very important to make sure that our code previews and syntax highlighting is looking good both on light and dark mode.

00:02:41 It's simple to make the app look nice on both, but to make the inner previews with MDX and content that it will show also work well with light and dark?

00:02:50 Well, that's a bit trickier.

00:02:52 After that, we can assume that we'll pass over some content into this preview component, And that content will be of a type string.

00:03:00 And after that, we'll have to format that content to apply some empty lines.

00:03:05 By saying const formatted content is equal to content.replace.

00:03:12 And we'll use a regular expression that looks something like this, where I want to replace.

00:03:18 the double backward slash character globally across the text with an empty string.

00:03:25 And I also want to replace another type of character.

00:03:28 And this character is this one right here.

00:03:32 That is a blank character.

00:03:33 And when we're displaying code, we want to make sure that we don't have any blanks like that.

00:03:38 Great.

00:03:39 So now that we have the formatted content, which by default we can make into a string, just so we don't have any issues right now,

00:03:47 we can then render a new section.

00:03:49 And within that section, we can render an MDX remote, which is a self-closing component, which accepts a source, which will be equal to this formatted content.

00:04:01 as well as some components on how we can render it.

00:04:06 And these components will be pre.

00:04:08 So this is a pre block of code with props.

00:04:13 and we can render a code block coming from Bright so we can properly render it.

00:04:18 Spread the props and pass additional props like line numbers as well as class name is equal to shadow-light-200 and on dark mode shadow-dark-200 as well.

00:04:35 And we can also style the section right here by giving it a class name equal to Markdown pros grid and break words.

00:04:49 Of course, you cannot see any changes right now because the content is empty.

00:04:54 But instead of simply passing an empty string by default, let's actually pass the content from the question details into the preview.

00:05:03 So I'll head over into the question details page, which is right here.

00:05:09 Find the preview and to it, pass content.

00:05:14 equal to sampleQuestion.content.

00:05:19 Or even better, we can just destructure the content from the sample question coming right here at the top.

00:05:27 There we go.

00:05:28 So now if we pass it that way, you can see how nicely this MDX remote renders all of the content that we passed into it.

00:05:36 And then also this bright block of code renders this great-looking block of code with line numbers.

00:05:44 If we didn't pass this components addition to it, it wouldn't be able to render it with syntax highlighting.

00:05:50 And I mean, it is a big difference, isn't it?

00:05:52 This makes the code very hard to read.

00:05:55 You don't have line numbers, you don't have syntax highlighting, but if you bring it back, this is so much better.

00:06:03 And check this out, if I switch over the mode, it actually switches.

00:06:08 So I can make it system, I can make it light or dark, and it is working incredibly well.

00:06:14 This is pretty crazy, right?

00:06:16 It seems like a very simple component preview that uses two additional packages, MDXRemote and code for syntax highlighting,

00:06:25 and it just works.

00:06:27 But how would it look like if we didn't provide all of these class names to it?

00:06:31 Like, what if we don't have any?

00:06:33 You'll notice that now it's not taking new lines and it's jumping out, and in general, it's just looking very bad.

00:06:39 But we can then say that this is a Markdown.

00:06:43 So now it applies all the Markdown formatting.

00:06:46 After that, we can give it Pros, which makes the text look nicer.

00:06:51 We can also give it a grid so it nicely aligns.

00:06:53 There we go.

00:06:55 As well as break words so they break and we can more easily read the text that is on here.

00:07:00 And altogether, those little things and choosing the right packages makes all the difference.

00:07:06 Because if you wanted to achieve something like this on your own without using MDX Remote and syntax highlighted code blocks from Write,

00:07:14 trust me, it will be super difficult and you would never get it to work properly.

00:07:18 So, check this out.

00:07:20 This already looks like a very nice question details page.

00:07:25 So what do you say that in the next lesson, we actually fetch the real question details instead of just displaying the dummy data?

00:07:32 Let's do that next.