
Adding comments to a [Jamstack](https://jamstack.org/) website is a challenge. The main reason for this is because
comments require some sort of database, and (one of) Jamstack's selling point is that it doesn't need one!
You can choose to connect a database such as [Firestore](https://firebase.google.com/docs/firestore) or [AWS](https://aws.amazon.com/products/databases/) - but we're not going to do that because it's

- challenging
- time consuming
- **costs money!**

In this article, I'll show you how to connect [utteranc](https://utteranc.es/) to your React based application.

## What Is Utteranc?

Utteranc under the hood interacts with the [GitHub api](https://docs.github.com/en/rest) to store all of your comments in the issues tab. According to their website, some of the pros of using utteranc are:

- Open source. 🙌
- No tracking, no ads, always free. 📡🚫
- No lock-in. All data stored in GitHub issues. 🔓
- Styled with Primer, the css toolkit that powers GitHub. 💅
- Dark theme. 🌘
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

I don't know about you, but this sounds like a great comment solution.

## Adding Utteranc To A React Website

If you want to add Utteranc to a simple html site, all you need to do is paste in a `<script>` tag. Unfortuantly, in React, we can't do this. We need to create a [custom component](https://reactjs.org/docs/components-and-props.html).

### Step 1: Create a GitHub repo

The first step is to create a GitHub repo to store your comments. You can use the same repo that your website
is pushed to, however, I recommend creating a new one just for the comments. You can then name this `comments-your-website-name` - or another name if you feel so inclined.

![The comments GitHub repo for this website](/content/snippets/add-comments-to-nextjs-website/comments-coffeeclass-io.png)

> ❗ Make sure this repo is public and that Utteranc is authorized. ❗

### Step 2: Create The React Component

Next, create a component named `Comments.js` in your app.

Add the following code:

```JavaScript:Comments.js
import React, { Component } from "react";

export default class Comments extends Component {

    constructor(props) {
        super(props);
        this.commentBox = React.createRef(); // use ref to create our element
    }

    componentDidMount() {
        scriptEl.setAttribute("theme", 'github-light');
        let scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "https://utteranc.es/client.js");
        scriptEl.setAttribute("crossorigin", "anonymous");
        scriptEl.setAttribute("async", true);
        scriptEl.setAttribute("repo", "your-repo-name-here"); // i.e. bjcarlson42/comments-coffeeclass.io
        scriptEl.setAttribute("issue-term", "url"); // you can change 'url' with other options
        this.commentBox.current.appendChild(scriptEl);
    }

    render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} />
            </div>
        );
    }
}
```

As you can see, we are doing the following:

- Create a class named Comments which extends Component
- Creating our element using `React.createRef()`
- Using `componentDidMount()` to set all the properties

Be sure to include your repo name on this line:

```JavaScript
scriptEl.setAttribute("repo", "your-repo-name-here");
```

Be sure to add your username too. For example, I would do `bjcarlson42/comments-coffeeclass.io` and not `comments-coffeeclass.io`.

#### Dynamic colorMode

If you want to dynamically change the color mode, you can do that too. Here is an example
of that using [Chakra-UI](https://chakra-ui.com/).

```JavaScript:Comments.js
import React, { Component } from "react";

export default class Comments extends Component {

    constructor(props) {
        super(props);
        this.commentBox = React.createRef(); // use ref to create our element
    }

    componentDidMount() {
        // dynamically getting color mode
        let colorMode = localStorage.getItem('chakra-ui-color-mode');
        const utteranceTheme = colorMode === "dark" ? "github-dark" : "github-light";
        scriptEl.setAttribute("theme", utteranceTheme);

        // or
        scriptEl.setAttribute("theme", 'github-light');

        // rest
        let scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "https://utteranc.es/client.js");
        scriptEl.setAttribute("crossorigin", "anonymous");
        scriptEl.setAttribute("async", true);
        scriptEl.setAttribute("repo", "your-repo-name-here"); // i.e. bjcarlson42/comments-coffeeclass.io
        scriptEl.setAttribute("issue-term", "url"); // you can change 'url' with other options
        this.commentBox.current.appendChild(scriptEl);
    }

    render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} />
            </div>
        );
    }
}
```

Finally, we return the actual html:

```JavaScript:Comments.js
render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} />
            </div>
        );
    }
```

> Make sure to add the `style={{ width: '100%' }}` otherwise your comment box will be squished. The `id=comments` is optional.

Now, go ahead and test it out by importing the component anywhere in your application! If you have questions feel free to leave them in the comments below - which uses utteranc ;).

The easiest (and best?) way to add comments to a Jamstack website.

How to add comments to a Next.js/React website? In this tutorial, we'll use utteranc - a comment solution which uses GitHub issues to store comments.

Add Comments To React/Next.js Website


## Introduction

Whenever I work with [Firebase](https://console.firebase.google.com/u/0/), I always seem to run into small issues that can be very annoying (yet simple) to solve. When I tried to connect my [Flutter](https://flutter.dev/) application to a Firebase backend for one of my personal projects, I ran into some small issues that set me back some time. Because of this, I decided to write a simple and straightforward article showing you how to connect your Flutter application to a firebase backend for both IOS and Android. After this tutorial, you will be all set to add authentication, Cloud Firestore, or any other Firebase feature you might want.

## Pre Reqs

To keep this tutorial short, I expect that you have the following:

- You have Flutter installed on your machine
- You have a Flutter project started already and are ready to connect it with Firebase

## Creating a Firebase Project

Before we start working in Flutter, we need to create a Firebase project.

1. Navigate to [Firebase console](https://console.firebase.google.com/)
2. Click on **Add Project**
3. Enter a project name
4. Choose if you want Google Analytics to be enabled (I recommend this). You can always enable this later on.
5. Choose what account you want this project to be associated with
6. Click **create project**

After a minute or two, your project will finish creating and you will be brought to the overview page.

## Add Firebase to Android

Next, we will add Firebase to our Android version. We will need to do IOS and Android separately although the process is similar.

![Firebase Console](/content/snippets/connect-flutter-to-firebase/console.png)

- Click on the Android Icon from the overview page
- Complete the Register App step.

For Android package name use the format: *com.[your name or business name].[project name]*. For app nickname, use whatever name you’d like.

![Firebase Console](/content/snippets/connect-flutter-to-firebase/add.png)

Step 2

- Download the config file and place it in the app level (in the app folder).

![Firebase Console](/content/snippets/connect-flutter-to-firebase/app-level.png)

- In the project level build.gradle, add the following:

![Firebase Console](/content/snippets/connect-flutter-to-firebase/build.gradle.png)

- In the app level build.gradle add the following:

![Firebase Console](/content/snippets/connect-flutter-to-firebase/app-level-build.gradle.png)

Lastly, in the app level build.gradle file (same file as above), find the applicationId and change it to the name you chose in step 2. In my case I used *com.benjamincarlson.medium_tutorial*.

![Firebase Console](/content/snippets/connect-flutter-to-firebase/name.png)

At this point we are done. Run the app with an android emulator and make sure everything works. You should see the following image below if everything works as expected.

![Firebase Console](/content/snippets/connect-flutter-to-firebase/working-android.png)

## Add Firebase to IOS

Like I said earlier, this is similar to what we did for Android.

Click on the IOS Icon from the overview page

Enter the IOS bundle ID. This can be found by opening your project in Xcode -> click on runner (top right) -> general tab -> Identity

![Firebase Console](/content/snippets/connect-flutter-to-firebase/bundle-id.png)

I changed mine from com.example.mediumTutorial to com.benjamincarlson.mediumTutorial.

- Enter an app nickname and app store ID (both optional)

- Download the config file. Add the file in the project root by opening Xcode, right clicking on runner, and clicking “add files to runner”. You need to add the file directly through Xcode otherwise you will get an error and the app won’t run.

- Skip the next 2 steps firebase tells you to do

- Run the IOS app and make sure everything is working correctly

## Finishing Up

The last thing you want to do is open up `pubspec.yaml` and add the following under dependencies:

```dart:pubspec.yaml
firebase_auth: ^0.14.0+5
cloud_firestore: ^0.12.9+4
```

Any other Firebase tools you want to use will be added here as well.

That’s it guys! I hope you found this article useful and that you are able to successfully connect your Flutter app to Google's Firebase!

Quickly add Firebase to your Flutter app!

Learn how to connect Google's Firebase database to your Flutter mobile app easily.

How To Use Firebase As Flutter's Backend


Adding Google analytics to a Next.js website seems complicated, but is not that difficult. To begin, make sure you have
a [Google Analytics](https://analytics.google.com/) account with your project set up. Create a folder in your Next.js root directory called `lib`. Inside of here, create a file named `gtag.js`. Paste in the following
code:

```javascript:gtag.js
export const GA_TRACKING_ID = 'G-XXXXXXXXXX'

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
    window.gtag('config', GA_TRACKING_ID, {
        page_path: url,
    })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
    window.gtag('event', action, {
        event_category: category,
        event_label: label,
        value: value,
    })
}
```

Replace the `'G-XXXXXXXXXX'` with your tracking id (This can be found in the Google Analytics admin pannel for your website).

## Halfway There!

Next, open up `_document.js`. If you do not have this file created already, [follow along with the docs](https://nextjs.org/docs/advanced-features/custom-document) and
and create a custom `_document` file for your site. Inside of here we will import our gtag and use it.

```javascript:_document.js
import { GA_TRACKING_ID } from '../lib/gtag'
// other imports

export default class MyDocument extends NextDocument {
    render() {
        return (
            <Html lang="en">

                {/* other code */}

            <Head>
                    {/* Global Site Tag (gtag.js) - Google Analytics */}
                    <script
                        async
                        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
                    />
                    <script
                        dangerouslySetInnerHTML={{
                            __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
                        }}
                    />
            </Head>

            {/* Other code */}

        </Html>
        )
    }
}
```

That's it! Once you [deploy to Vercel](https://vercel.com/) (or another hosting service of your choice) you should see analytics coming
through after 5 minutes or so.

![Realtime Views](/content/snippets/add-google-analytics-to-nextjs/realtime.png)

Easily connect your website to Google Analytics.

Connect Google analytics to your Next.js website and track clicks, scrolls, page views, and more.

Add Google Analytics To Next.js Website


## Introduction

If you are familiar with Bootstrap, you know how easy it is to create a responsive nav-bar. In Chakra-UI,
there is no built in, out of the box solution. In this snippet, we will create a responsive
nav-bar component that you can use in your React app.

## Setup

We will be using Next.js in this example but it works for any react based framework. Navigate to the [Next.js GitHub repo](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui) and
clone their starter example using Chakra-UI. If you don't want
to leave this page the command is:

```bash
yarn create next-app --example with-chakra-ui with-chakra-ui-app
```

Open this in your preferred IDE - mine is [VSCode](https://code.visualstudio.com/). Inside of `src/components`, open up the `DarkModeSwitch` component.
This is the only file we will be modifying.

## Imports

We will start by importing everything we need.

```javascript:DarkModeSwitch.js
import { useState } from 'react'
import {
  useColorMode,
  Switch,
  Flex,
  Button,
  IconButton
} from '@chakra-ui/react'
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
import NextLink from 'next/link'
```

## Adding Desktop Content

First, wrap everything inside of a `Flex` element. Then, add the below code.

```javascript:DarkModeSwitch.js
<Flex>
<Flex position="fixed" top="1rem" right="1rem" align="center">
  {/* Desktop */}
  <Flex>
    <NextLink href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </NextLink>

    <NextLink href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </NextLink>

    <NextLink href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </NextLink>
  </Flex>

  {/* Mobile */}
  <IconButton
    aria-label="Open Menu"
    size="lg"
    mr={2}
    icon={<HamburgerIcon />}
    onClick={}
  />
  <Switch color="green" isChecked={isDark} onChange={toggleColorMode} />
</Flex>
{/* Mobile Content */}
</Flex>
```

## Adding Mobile Content

This is simply our desktop nav bar. We will add the mobile content below the comment. Let's do that now.

```javascript:DarkModeSwitch.js
{/* Code above */}

{/* Mobile Content */}
<Flex
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>
  <Flex justify="flex-end">
    <IconButton
      mt={2}
      mr={2}
      aria-label="Open Menu"
      size="lg"
      icon={<CloseIcon />}
      onClick={}
    />
  </Flex>

  <Flex flexDir="column" align="center">
    <NextLink href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </NextLink>

    <NextLink href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </NextLink>

    <NextLink href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </NextLink>
  </Flex>
</Flex>
```

## Using useState To Open And Close Navigation

Now that we have content, we need a way to show it. We can use `useState` for this. Before the
return statement, add the following:

```javascript:DarkModeSwitch.js
const [display, changeDisplay] = useState('none')
```

We now have a variable `display` set initially to none, and a method `changeDisplay` we can use
to change it.

Let's add this to our code. Note, I am only writing the components that we are changing below.

```javascript:DarkModeSwitch.js
<IconButton
          aria-label="Open Menu"
          size="lg"
          mr={2}
          icon={
            <HamburgerIcon />
          }
          onClick={() => changeDisplay('flex')} // added line
        />

<Flex
  display={display} // added line
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>

<IconButton
            mt={2}
            mr={2}
            aria-label="Open Menu"
            size="lg"
            icon={
              <CloseIcon />
            }
            onClick={() => changeDisplay('none')} // added line
          />
```

Now we should be able to open and close the menu! It looks a bit messy though. Let's add styles to the `Flex`.

```javascript:DarkModeSwitch.js
<Flex
  w="100vw"
  display={display}
  bgColor="gray.50"
  zIndex={20}
  h="100vh"
  pos="fixed"
  top="0"
  left="0"
  overflowY="auto"
  flexDir="column"
>
```

The important styles we added:

- Setting the height to 100vh
- Setting the width to 100vw
- Setting the position to fixed
- Making z-index 20 so it is above the page content
- Setting top and left to 0
- Setting the display to our dynamic display variable.

The rest is subjective.

## Completed Code

And that's it! Here is the completed code:

```javascript:DarkModeSwitch.js
import { useState } from 'react'
import {
  useColorMode,
  Switch,
  Flex,
  Button,
  IconButton
} from '@chakra-ui/react'
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
import NextLink from 'next/link'


export const DarkModeSwitch = () => {
  const { colorMode, toggleColorMode } = useColorMode()
  const isDark = colorMode === 'dark'
  const [display, changeDisplay] = useState('none')
  return (
    <Flex>
      <Flex
        position="fixed"
        top="1rem"
        right="1rem"
        align="center"
      >
        {/* Desktop */}
        <Flex
          display={['none', 'none', 'flex','flex']}
        >
          <NextLink href="/" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Home"
              my={5}
              w="100%"
            >
              Home
                    </Button>
          </NextLink>

          <NextLink href="/about" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="About"
              my={5}
              w="100%"
            >
              About
                    </Button>
          </NextLink>

          <NextLink href="/contact" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Contact"
              my={5}
              w="100%"
            >
              Contact
                    </Button>
          </NextLink>
        </Flex>

        {/* Mobile */}
        <IconButton
          aria-label="Open Menu"
          size="lg"
          mr={2}
          icon={
            <HamburgerIcon />
          }
          onClick={() => changeDisplay('flex')}
          display={['flex', 'flex', 'none', 'none']}
        />
        <Switch
          color="green"
          isChecked={isDark}
          onChange={toggleColorMode}
        />
      </Flex>

      {/* Mobile Content */}
      <Flex
        w='100vw'
        display={display}
        bgColor="gray.50"
        zIndex={20}
        h="100vh"
        pos="fixed"
        top="0"
        left="0"
        zIndex={20}
        overflowY="auto"
        flexDir="column"
      >
        <Flex justify="flex-end">
          <IconButton
            mt={2}
            mr={2}
            aria-label="Open Menu"
            size="lg"
            icon={
              <CloseIcon />
            }
            onClick={() => changeDisplay('none')}
          />
        </Flex>

        <Flex
          flexDir="column"
          align="center"
        >
          <NextLink href="/" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Home"
              my={5}
              w="100%"
            >
              Home
                    </Button>
          </NextLink>

          <NextLink href="/about" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="About"
              my={5}
              w="100%"
            >
              About
                    </Button>
          </NextLink>

          <NextLink href="/contact" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Contact"
              my={5}
              w="100%"
            >
              Contact
            </Button>
          </NextLink>
        </Flex>
      </Flex>
    </Flex>
  )
}
```


Learn how to create a responsive navigation bar using Chakra-UI.

Create a responsive navigation bar using Chakra-UI. Mobile responsive, add animation useing framer motion.

Chakra-UI Responsive Navigation Bar


## The Problem

Recently, I was building a [Flutter](https://flutter.dev/?gclid=Cj0KCQjwsqmEBhDiARIsANV8H3aB8Bs-JYv8Pupzys4lwa3Trgh2gIfCWxUGsf4BuCIVxM0VJnT6sikaAmc_EALw_wcB&gclsrc=aw.ds) app and
I needed to map over an array of users when a user logged in and check if their username, password, and security question answer matched what was
in the database (the userArray). I tried to do something like this:

```dart
var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                // log user in
            } else {
                    // don't log user in
                }
            });
```

> Quick note: I removed some of my project specific logic and only included the important parts so it is easier to follow.

This code logs the user in *if* they are user 1. This looks like it should work, right? Unfortunately, it doesn't. It will not break either. Instead,
nothing will happen. This makes it hard to debug.

## The Solution

The simple solution is to add `.toList()` to the end of the map statement.

```dart
var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                // log user in
            } else {
                    // don't log user in
                }
            }).toList(); // add .toList() here!
```

## Why This Works

Unlike in [JavaScript](https://www.javascript.com/), in Dart when you `.map()` over an object, the `Iterable` that
is returned is `lazy`. This means it is not evaluated by calling `.map()`. To `evaluate` it, we need to call `.toList()`. You
can read more about this [here](https://api.dart.dev/stable/2.12.4/dart-core/Iterable-class.html).

If you want to quickly see this in action, open up [DartPad](https://dartpad.dev/?null_safety=true) and paste in the code below (with added print statements)
with and without `.toList()`.

```dart
void main() {
  var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                print('logging user 1 in!')
            } else {
                    print('Not user 1, can\'t log in!')
                }
            }).toList(); // Remove .toList() to see no output!
}
```

## From The Flutter Docs

<br />

### .map()

> `Iterable<T>` `map<T>`(T Function(String) f)

Returns a new lazy Iterable with elements that are created by calling f on each element of this Iterable in iteration order.

This method returns a view of the mapped elements. As long as the returned Iterable is not iterated over, the supplied function f will not be invoked. The transformed elements will not be cached. Iterating multiple times over the returned Iterable will invoke the supplied function f multiple times on the same element.

Methods on the returned iterable are allowed to omit calling f on any element where the result isn't needed. For example, elementAt may call f only once.

### .toList()

> `List<Set<Set<void>>>` toList({bool growable = true})

Creates a List containing the elements of this Iterable.

The elements are in iteration order. The list is fixed-length if growable is false.

Using .map() in dart doesn't have to be complicated.

Dart and Flutter doesn't return data when I use .map() function on array list.

How To Use The map() Function In Dart


Chances are, you are a developer looking to build  a personal website to show off your projects, experience, writing, and more.
If you are using a React based framework, like Next.js, you can use MDX pages instead of JavaScript! By doing this, you can 

- Increase page speed
- Increase SEO
- Easier content development (I.E. A blog)

> This website uses mdx pages for all the snippets, tutorials, and learn posts!

## Starter Files

Go ahead and create a new Next.js project or feel free to use an already started project.

## Adding dependencies

Inside of `package.json` we need to add a few dependencies.

```json:package.json
"dependencies": {
    "@mdx-js/loader": "^1.5.1",
    "@mdx-js/react": "^1.6.18",
    "@next/mdx": "^9.1.1",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
```

Make sure to add `@mdx-js/loader`, `@mdx-js/react`, and `@next/mdx`. I left in `next`, `react`, and `react-dom` so you can see what versions I am using.

## next.config.js

Next, create a file in your root directory named `next.config.js`. You may already have this file created. Inside of it we will use the dependencies we just added.

```javascript:next.config.js
const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
})
module.exports = withMDX({
    pageExtensions: ['js', 'jsx', 'mdx'],
})
```

## Adding MDX pages

Inside of `pages` directory, add a page named `about.mdx`. If you navigate to this route you should see a blank screen. This is good, because if we got an error that would mean we did something wrong.

Inside of here we can add anything we want. Any [Markdown syntax](https://www.markdownguide.org/basic-syntax/) will work.

```javascript:about.js
// # About

// ## Paragraph 1

Lorem ipsum dolor `sit` amet, consectetur adipiscing elit. Ut viverra euismod nisi, quis dignissim nisl sodales ut. Integer tincidunt congue orci. Vestibulum eu scelerisque massa, at tempor erat. Sed sed placerat tortor. Nam sagittis gravida quam, id commodo est rhoncus in. Cras eget venenatis sapien, nec eleifend ex. Nullam rhoncus nulla ac tellus tincidunt tincidunt. Proin non nisl non ex fermentum placerat et eget sem.

// ### Sub Paragraph

Maecenas gravida lacinia ante eu placerat. Phasellus placerat erat enim, ut suscipit nunc ultrices et. Praesent dictum arcu et volutpat tristique. Aliquam vitae enim ut ante vulputate suscipit non at purus. Sed efficitur lacinia augue, non placerat orci semper vitae. Curabitur sodales auctor rhoncus. Morbi porttitor nisi id mi cursus bibendum. Integer bibendum elementum nibh vitae imperdiet. In tortor elit, convallis rutrum ultricies nec, aliquam sit amet massa. Cras nec condimentum neque. Donec malesuada neque a enim ultricies, sollicitudin tempus libero vulputate.
```

> Don't comment out the headers in your application! I did this because it was messing up my getHeaders function you see on the right side of this page!

We can even use components!

```javascript:about.js
import Button from '../components/Button.js'

# About

<Button />

// ## Paragraph 1

Lorem ipsum dolor `sit` amet, consectetur adipiscing elit. Ut viverra euismod nisi, quis dignissim nisl sodales ut. Integer tincidunt congue orci. Vestibulum eu scelerisque massa, at tempor erat. Sed sed placerat tortor. Nam sagittis gravida quam, id commodo est rhoncus in. Cras eget venenatis sapien, nec eleifend ex. Nullam rhoncus nulla ac tellus tincidunt tincidunt. Proin non nisl non ex fermentum placerat et eget sem.

// ### Sub Paragraph

Maecenas gravida lacinia ante eu placerat. Phasellus placerat erat enim, ut suscipit nunc ultrices et. Praesent dictum arcu et volutpat tristique. Aliquam vitae enim ut ante vulputate suscipit non at purus. Sed efficitur lacinia augue, non placerat orci semper vitae. Curabitur sodales auctor rhoncus. Morbi porttitor nisi id mi cursus bibendum. Integer bibendum elementum nibh vitae imperdiet. In tortor elit, convallis rutrum ultricies nec, aliquam sit amet massa. Cras nec condimentum neque. Donec malesuada neque a enim ultricies, sollicitudin tempus libero vulputate.
```

And the button component:

```javascript:button.js
export default function Button() {
    return (
        <button onClick={() => alert('Button was clicked')}>Click me!</button>
    )
}
```

## Adding Styles

At this point you might be saying to yourself, this is great but how do I add styles? We can do that by mapping each markdown tag to an html element and then style that!

Create a file named `MDXComponents.js`.

Inside of here, add the following:

```javascript:MDXComponents.js
const CustomCode = (props) => {
    return <code style={{ backgroundColor: 'lightblue' }} {...props} />
}

const MDXComponents = {
    p: (props) => <p style={{ fontSize: '25px' }} {...props} />,
    inlineCode: CustomCode,
}

export default MDXComponents
```

As you can see, we are mapping some Markdown element to some HTML element and then styling it. You can do this for any html tag.

The last step is to wrap our application with these styles. Inside of `_app.js`:

```javascript:_app.js
import '../styles/globals.css'
import MDXComponents from '../components/MDXComponents' // import the styles
import { MDXProvider } from '@mdx-js/react' // import the dependency

function MyApp({ Component, pageProps }) {
  return (
    // Wrap out page props with the MDX Provider!
    <MDXProvider components={MDXComponents}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}

export default MyApp
```

## Conclusion

And that's it! You can now rest easy knowing your pages load in record time!

How to use MDX pages in Next.js for better speed and SEO!

If you are building a developer personal website using next.js, you can use mdx pages for your blog or other static pages to increase speed and seo.

Next.js + MDX Pages Quickstart

Seamlessly add Firebase to your Next.js project.

Learn how to connect Next.js to Google's Firebase and use authentication, cloud Firestore, Realtime Database, and cloud storage.

Content

Company

#utteranc

Snippets

Add Comments To React/Next.js Website

Tutorials