Using Components in mdx

You can find the code for the components used as examples in this chapter at file ULL-ESIT-PL-2324/pl-nextra/tree/main/components (opens in a new tab)

Counter Component internal to the mdx file

This is the actual code inserted in the mdx file:

import { useState } from 'react'
 
{/* Import CSS modules */}
import styles from '../..//components/counters.module.css'
 
export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)} className={styles.counter}>Clicked {count} times</button>
    </div>
  );
};
 
<Counter/>

And this the result:

External Counter Component

This is the actual code:

import Counters from '../../components/counters'
 
<Counters />

We import the component from ../../components/counters and insert it in the mdx file. This is the result:

💡

Hero component example

Migration to MDX 2 (opens in a new tab) comes with improved performance, supporting any JSX runtime and JavaScript expression inside your markdown pages.

The following code:

import Hero from "../../components/hero"
 
<Hero/>

Looks like:

💡

What you'll learn

How to build this landing page with Next.js
How to create API endpoint and integrate with ConvertKit API
How to use React Hook Form and TailwindCSS

Coming Soon!

Youtube component

import Youtube from '../../components/youtube';
 
<Youtube id="a_2vXCeW21I" title="Arggg" />

Snowfall component example

The following code:

import {Chart} from '../../components/snowfall.jsx'
export const year = 2023
 
### Last year’s snowfall
 
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
 
<Chart year={year} color="#fcb32c" />

Is converted into:

Last year’s snowfall

In 2023, the snowfall was above average. It was followed by a warm spring which caused flood conditions in many of the nearby rivers.

useConfig