Import component in blog

Why Component?

Making website with reusable component make easy and save time for building the website. Using reusable component is the modern way for developing any web project.

Importing Image using Custom Component

Code in MDX

<Image
  alt={`NextVita Logo`}
  src={`/logo.png`}
  width={211}
  height={60}
/>

Output in the blog page is as Below

Testimonials Component in blog

We will use Testimonials component we used in the home page to show how we can use any custom component in blog using mdx file.

Code to Implement

file _app.js

import Testimonials from "../components/Testimonials";
...

<MDXProvider components={{ Image, Testimonials }}>
...

Once you have imported that component in the pages/_app.js file we can use it on mdx file.

file import-reusable-component-in-mdx.mdx

<Testimonials />

Below is the output of the above code.

Testimonials

Sample testimonial section for your website