Place google ads in the middle of next-mdx-remote
Post by: Niraj Dhungana
Posted on: Nov 24 2021
#MDXRemote# Next JS# Markdown
If you are a programmer and you want to create a blog then nothing is better then Next JS and markdown. If you do so then there is nothing better than next-mdx-remote to render markdown inside your Next JS app.
In the previous post we saw how we can place ads through google adsense inside the Next JS website. Now let's see how we can render google ads in the middle of next-mdx-remote.
Custom component inside MDXRemote
Here I am going to use the custom
Adsense component which I made in the previous post. So, I highly recommend you guys to at least look at the code which we wrote in this post.
If you guys don’t know or it is nice if you already know this thing. The thing is inside
next-mdx-remote we can inject custom JSX components.
I hope you already did all the things like
serialize and all to render markdown inside
MDXRemote. Now I will show you how you can render the Adsense component or your custom adsense component in the middle of other markdown or inside
Now this is how we can inject our custom JSX component inside next-mdx-remote. Let’s create our AdsenseComponent.
The thing is now if you put
<Adsense /> in the middle of your markdown. You will see google ads. Sometimes it takes time or you can check the console. If you don’t have any error related to google adsense. Then you are good to go.
If you have any doubt or suggestion you can DM me on @ndpniraj.