The React Framework for Production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

nextjs


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 [utterances](https://utteranc.es/) to your React based application.

## What Is Utterances?

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 Utterances 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 Utterances 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


Most websites use [Google Analytics](https://analytics.google.com/analytics/web/) to track users and events. This is a great way to get an idea of how your website is performing. However, there are some downsides to using Google Analytics.

1. They sell your data
2. It slows down your website speed slightly
3. There is a significant learning curve

In this snippet, we will explore an alternative analytics solution called [Splitbee Analytics](https://www.splitbee.com/).

<SnippetStep number="1" title="Register" />

Navigate to [https://splitbee.io/](https://splitbee.io/) and sign up for a free account (no credit card required).

<SnippetStep number="2" title="Add The Tracking Tag" />

Add the folling tag to the head of your website. In Next.js this is inside of `_document.js`.

```javascript
<script async src="https://cdn.splitbee.io/sb.js"></script>
```

```javascript:_document.js
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends NextDocument {
    render() {
        return (
            <Html lang="en">
                <Head>
                    {/* Splitbee Analytics */}
                    <script async src="https://cdn.splitbee.io/sb.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}
```

<SnippetStep number="3" title="Go To Your Site" />

Navigate to your site and you should see analytics flow through your dashboard!

<SnippetStep number="4" title="Advanced Usage" />

To get the most out of Splitbee, the Splitbee team recommends looking into event tracking and storing user properties. They allow you to do things like:

- Track conversion events
- Capture form data and attach it to a user
- Assign data to a user, like their email address

Happy tracking!


Tracking analytics has never been easier.

Add Splitbee Analytics to a Next.js Jamstack website for free. Track analytics, users, funnels, automate tasks, run experiments like a/b testing and more with Splitbee Analytics.

Add Splitbee Analytics To Next.js


<EmbeddedVideo src="https://www.youtube.com/embed/joYNKCG3cWo" alt="Watch Advanced Chakra UI on YouTube." maxW={800} />

[Chakra UI](https://chakra-ui.com) is a css framework for React based apps. It is super easy to use which makes for a smooth developer experience. I've been using Chakra UI for over a year now and in this time I've learned a lot about it. In this post, I'll show you 5 Chakra UI features that will take you from beginner to advanced.

<SnippetStep number="1" title="Custom Theme Multiple Files" />

When you override the default theme, most developers create one theme file - usually named `theme.js`. When your project gets larger and you have multiple components and multiple overrides this file will get long and hard to read. To fix this we can use multiple theme files. It will look something like this: We can create a folder named `theme`. Inside of here create a file named `index.js`. This will be the main entry point for our theme. It is where we will use the `extendTheme` hook and pass in the overrides.

```jsx
📁 theme
  📄 index.js  # my main theme entrypoint
  📄 styles.js  # all my global style overrides
  📁 foundations
    📄 borders.js  # all my border overrides
  📁 components
    📄 button.js  # all my button overrides
```

You'll notice we are importing a few other files. `styles.js` will be all of our custom style overrides. For example color, fonts, etc. The `foundations` folder will hold our Foundational style overrides and the `components` folder will hold all of our component style overrides. By splitting it up like this, we create a project that is scalable friendly.

```jsx
// theme/index.js
import { extendTheme } from "@chakra-ui/react"

// Global style overrides
import styles from "./styles"

// Foundational style overrides
import borders from "./foundations/borders"

// Component style overrides
import Button from "./components/button"

const overrides = {
  styles,
  borders,
  // Other foundational style overrides go here
  components: {
    Button,
    // Other components go here
  },
}

export default extendTheme(overrides)
```

<SnippetStep number="2" title="useBreakpointValue" />

Normally to create responsive values in Chakra UI you do something like this:

```jsx
<Text fontSize={[10, 20, 30]}>I am responsive.</Text>

// or

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>I am responsive.</Text>
```

However, some properties like variant and size don't accept this. For these properties, we need to use the `useBreakpointValue` hook. By using this, we can achieve the same effect as the array and object syntax. 

```jsx
function Example() {
  const variant = useBreakpointValue({ base: "outline", md: "solid" })

  return (
    <VStack align="flex-start">
      <Text>Resize your window to see the button variant change</Text>
      <Button colorScheme="teal" variant={variant}>
        Button
      </Button>
    </VStack>
  )
}
```

<SnippetStep number="3" title="useMediaQuery" />

`mediaQuery` is an advanced css feature but Chakra UI makes it easier to use. You might be thinking, why do we need this if we already have custom breakpoints? Well, you might want to add a breakpoint that is not defined in our custom breakpoints to only one element. To use this, simply use the `useMediaQuery` hook and pass in your value. Then use the variable in the code!

```jsx
function Example() {
  const [isLargerThan1280] = useMediaQuery("(min-width: 1280px)")

  return (
    <Text>
      {isLargerThan1280 ? "larger than 1280px" : "smaller than 1280px"}
    </Text>
  )
}
```

<SnippetStep number="4" title="config" />

There is a property called `config` which is passed into the `extendTheme` hook. This property takes in 3 global theme config properties which most people don't use.

```jsx
const config = {
    initialColorMode: "light",
    useSystemColorMode: false,
    cssVarPrefix: "coffeeclass-io",
}
```

The first is `initialColorMode`. This is the initial color mode that will render when the user gets to your site. 

The second is `useSystemColorMode`. This is a boolean value that tells Chakra UI to use the system color mode (or not if it's set to `false`). 

The third is `cssVarPrefix`. This is the prefix that Chakra UI will use for all of its css variables. It does not change any of the behavior but it is a cool way to further personalize your app.

<SnippetStep number="5" title="Custom Color Palette" />

Right out of the box, Chakra UI provides us with some nice looking colors. If you dive deeper into the colors, you'll notice that each color has a value from [50 to 900](https://chakra-ui.com/docs/theming/theme). This is so it works well with the `colorScheme` property and the color mode. You can create your own custom color palette such as a brand color palette but naming it and then passing in hex values for each of the values. You'll want to make 50 your lightest color and work your way darker for best results.

```jsx
custom_brand: {
        50: '#FFF29F',
        100: '#FFEE80',
        200: '#FFEA60',
        300: '#FFE540',
        400: '#FFE120',
        500: '#FFDD00',
        600: '#DFC100',
        700: '#BFA600',
        800: '#9F8A00',
        900: '#806E00'
    }
```

```jsx
<Button colorScheme="custom_brand" size="xs">
    Button
 </Button>
```

![Chakra UI default red color pallete](/content/snippets/advanced-chakra-ui-do-you-know-all-5/color-pallete.png)

## Conclusion

Did you know all 5 of these advanced Chakra UI tricks? If so leave a comment down below!


Learn 5 Chakra UI advanced tricks and tips to bring you from a beginner React developer to advanced.

Advanced Chakra UI


In this snippet we will create a simple mobile navigation bar using Chakra UI's [drawer component](https://chakra-ui.com/docs/overlay/drawer). It will be similar to the one on this website.

<SnippetStep number="1" title="Creating the Hamburger Icon Button" />

To begin, we will create a simple `IconButton` to open the Navbar. Declare some basic properties such as `aria-label`, `m`, and `zIndex`.

```javascript
const Navbar = () => {
  return (
    <>
      <IconButton
        pos="fixed"
        right={0}
        top={0}
        m={3}
        zIndex="10"
        aria-label="Open Menu"
        icon={<HamburgerIcon />}
        onClick={onOpen} // what's this?
      />
    </>
  );
};

export default NavBarTop;
```

You will notice that the `onClick` property is set to `onOpen`. This is from `useDisclosure`. [Chakra UI](https://chakra-ui.com/) gives us this along with `isOpen` and `onClose` to handle the state of the Drawer.

<SnippetStep number="2" title="Adding The Drawer" />

Import the drawer component and all of its sub components.

```javascript
import {
  useDisclosure,
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
} from "@chakra-ui/react";
```

Now, we can use the `Drawer` component to create the drawer. We can add this right under the `IconButton` which I will not show below for brevity.

```javascript
<Drawer onClose={onClose} isOpen={isOpen} size="sm">
  <DrawerOverlay />
  <DrawerContent>
    <DrawerHeader borderBottomWidth="3px">
      <Heading>I am the Header!</Heading>
    </DrawerHeader>
    <DrawerBody>
      <Text>
        I am the body! Add aything in here, even components like Flex and
        Button.
      </Text>
      <Flex>
        <Button />
      </Flex>
    </DrawerBody>
  </DrawerContent>
</Drawer>
```

The last step is to add the `useDisclosure` hook above the return statement.

```javascript
const { isOpen, onOpen, onClose } = useDisclosure();
```

<SnippetStep number="3" title="More Improvements" />

Lastly, let's add a button to close the Drawer. We can use the `onClose` method to do this. Again, I am not repeating any code for brevity.

```javascript
<IconButton
  size="md"
  onClick={onClose}
  icon={<CloseIcon fontSize="xs" />}
  borderRadius={5}
/>
```

As always, refer to the Chakra UI docs for additional [Drawer props](https://chakra-ui.com/docs/overlay/drawer#props).


Use Chakra UI's drawer component to create a simple mobile navigation bar.

Chakra-UI Mobile Navbar (Drawer Component)


## 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 using framer motion.

Chakra-UI Responsive Navigation Bar


```dart:main.dart
import 'package:flutter/material.dart';
import 'package:bottom_navigation_bar/nav.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Bar Tutorial',
      home: Nav(),
    );
  }
}
```

```dart:nav.dart
import 'package:flutter/material.dart';
import 'package:bottom_navigation_bar/home_screen.dart';

class Nav extends StatefulWidget {
  @override
  _NavState createState() => _NavState();
}

class _NavState extends State<Nav> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget>[
    Home(),
    Text('Messgaes Screen'),
    Text('Profile Screen'),
  ];

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Tutorial'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              'Home',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.message,
            ),
            title: Text(
              'Messages',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            title: Text(
              'Profile',
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTap,
        selectedFontSize: 13.0,
        unselectedFontSize: 13.0,
      ),
    );
  }
}
```

```dart:home_screen.dart
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.ac_unit),
          Icon(Icons.access_alarms),
        ],
      ),
    );
  }
}
```

## Usage

<SnippetStep number="1" title="Adding The Code" />

- Inside of `main.dart` point your home to your nav component: `home: Nav(),`
- Inside of `nav.dart` add the Bottom Navigation Bar code. Your nav screens go inside the `_widgetOptions` list. In this example we have a `Home(),` screen.

<SnippetStep number="2" title="More Than 3 Items" />

If you need more than 3 Nav bar items, you will need to add the following property to the nav bar:

```dart
...
selectedFontSize: 13.0,
unselectedFontSize: 13.0,
type: BottomNavigationBarType.fixed, // addded line
...
```

Create a flutter bottom navigation bar using the BottomNavigationBar Flutter widget that works with more than 3 items!

Create A Flutter Bottom Navigation Bar

## Introduction

A sitemap is how you tell Google what pages are in your website. This helps them get ranked higher. Take a look at the performance chart of this website. 

![Performance click chart in Google Search Console for coffeeclass.io](/content/snippets/generate-dynamic-sitemap/performance.png)

I added the sitemap on 7/20/21 and you can see the clicks spiked right after.

In this snippet, we'll write code to generate a dynamic sitemap for a React (specifically Next.js) based website.

<SnippetStep title="Install Dependencies" number="1" />

First, install these 3 dependencies:

```bash
yarn add fs globby prettier
```

We will be using `fs` to write to our file system, `globby` to read and sort the files, and `prettier` to format our outputted `sitemap.xml`.

<SnippetStep title="Write Code!" number="2" />

Create a file named `generate-sitemap.js`. Inside of here, require all 3 of the packages we just imported.

```bash
const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');
```

Next, define our `async` function.

```jsx
(async () => {
	// we'll add code in here!
})();
```

<SnippetStep title="Use `globby` to find files and directories using glob patterns" number="3" />

We'll initialize our prettier variable named `prettierConfig` and use `globby` to find files and directories using glob patterns. In this example, I have `js` pages inside of a `pages` folder and `mdx` files inside of a  `content` folder. We can also exclude routes using `!`.

```jsx
(async () => {
	const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
    const pages = await globby([
        'pages/*.js',
        'content/**/*.mdx',
        '!pages/_*.js',
        '!pages/api'
    ]);
})();
```

<SnippetStep title="Create our `sitemap` variable" number="4" />

Declare a variable `sitemap` which will be our sitemap content. Go ahead and add any urls that were not able to be fetched with `globby`. Below that, map over the `pages` variable, remove the extensions, and add them to the sitemap.

```jsx
(async () => {
	const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
    const pages = await globby([
        'pages/*.js',
        'content/**/*.mdx',
        '!pages/_*.js',
        '!pages/api'
    ]);

const sitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            
            <url>
                <loc>https://www.example.com</loc>
            </url>
					${pages
            .map((page) => {
                const path = page
                    .replace('pages', '')
                    .replace('content', '')
                    .replace('.js', '')
                    .replace('.mdx', '');
                const route = path === '/index' ? '' : path;
                if (path === '/404') {
                    return;
                }
                return `
                        <url>
                            <loc>${`https://www.example.com${route}`}</loc>
                        </url>
                    `;
            })
            .join('')}
        </urlset>
    `;
})();
```

<SnippetStep title="Use `fs` To Write To Public Folder" number="5" />

Finally, format the sitemap using prettier and write the sitemap to our `public` directory using `fs`.

```jsx
const formatted = prettier.format(sitemap, {
        ...prettierConfig,
        parser: 'html'
    });

    // eslint-disable-next-line no-sync
    fs.writeFileSync('public/sitemap.xml', formatted);
```

Your sitemap is now available on the route `/sitemap.xml`!

## Full Code

```jsx
(async () => {
	const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
    const pages = await globby([
        'pages/*.js',
        'content/**/*.mdx',
        '!pages/_*.js',
        '!pages/api'
    ]);

const sitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            
            <url>
                <loc>https://www.example.com</loc>
            </url>
					${pages
            .map((page) => {
                const path = page
                    .replace('pages', '')
                    .replace('content', '')
                    .replace('.js', '')
                    .replace('.mdx', '');
                const route = path === '/index' ? '' : path;
                if (path === '/404') {
                    return;
                }
                return `
                        <url>
                            <loc>${`https://www.example.com${route}`}</loc>
                        </url>
                    `;
            })
            .join('')}
        </urlset>
    `;

    const formatted = prettier.format(sitemap, {
        ...prettierConfig,
        parser: 'html'
    });

    // eslint-disable-next-line no-sync
    fs.writeFileSync('public/sitemap.xml', formatted);
})();
```

## Google Search Console

The last thing you want to do is tell google where to find your sitemap. Navigate to [Google Search Console](https://search.google.com/search-console) and in the left pannel, click on the "Sitemaps" tab. In the "Add a new sitemap" input box, enter the url to your sitemap. When Google processes it, you should see a success status in the table!

Add a sitemap to your React website to boost seo!

Learn how to create a dynamic sitemap for a react and Next.js website using fs, globby, and prettier.

Generate A Dynamic Sitemap In Next.js Website


Back in the day when JavaScript was introduced, it didn’t have any specific `date` data type. But later, the [date data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) was introduced in JavaScript and that’s when developers started to look around for ways to compare dates in JavaScript.

If you are also looking for ways to compare different dates, you are at the right place. Besides that, even if you were just exploring the topic, it is recommended to go through this guide because at some point in your programming career as you will need to compare dates.

In this guide, I’m going to explain the simplest and most functional method to compare dates in JavaScript.

## Simplest Method to Compare Dates

In order to compare dates, you have to convert the data type values to numerical values. You can do that using the built in method `getTime()`.

### getTime Method Definition

`getTime()` returns the number of milliseconds since midnight, January 1, 1970, Coordinated Universal Time (UTC).

> Refer to the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime) for more information.

### getTime Usage

Once you have successfully converted the dates values to numeric values, you can use the comparison operator such as `>`, `<`, etc. 

Refer the script below for better understanding:

```javascript
var date1 = new Date(2021 - 08 - 21);
var date2 = new Date(2020 - 09 - 21);

if (date1.getTime() > date2.getTime())
    console.log("First date is greater than Second Date");

else if (date1.getTime() < date2.getTime())
    console.log("First date is lesser than Second date");

else
    console.log("Both the dates are same");
```

```bash:Output
First date is greater than Second Date
```

> In this example, only year, month and day was passed in both the variables. If you want, you can pass year, month, day, hour, minute, second as well. But beware of the format i.e., `YY-MM-DD-Hr-Min-Sec`

Refer the script below for more understanding:

```javascript
var date1 = new Date(2021, 08, 21, 12, 15, 20); // Year, Month, Day, Hour, Minute, Second
var date2 = new Date(2020, 09, 21, 11, 23, 18); // September 21, 2020, 11:23:18 AM

if (date1.getTime() > date2.getTime())
    console.log("First date is greater than Second date");

else if (date1.getTime() < date2.getTime())
    console.log("Second Date is greater than First date");

else
    console.log("Both the dates are same");
```

```bash:Output
First date is greater than Second date
```

> ❗ Note: The time values are in [millitary time](http://militarytimechart.com/) ❗

## Final Notes

In this guide, you have learned how to compare dates in JavaScript. Now, let's quickly recap everything that we have read so far. 

1. First, you need to convert the dates to numeric values. 
2. Secondly, you have to use the basic comparison operators to compare the numeric dates. 

Based on the comparison, you can print the desirable output, or use the values however you want!


Compare Dates in JavaScript with ease using getTime()

How to compare 2 or more dates in JavaScript using the getTime method. getTime definition and usage.

How to Compare Dates in JavaScript


## What Is React Native?

React Native is a JavaScript framework for building cross platform mobile apps. It allows you to create native apps for Android and iOS using [React](https://reactjs.org/).

For the website: React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

> Learn once, write anywhere.

In this tutorial, I’ll show you how to quickly set up a React Native project and run your app on your actual device!

## Expo

In this tutorial, we will be using [Expo](https://expo.dev/) with React Native. Expo acts as a container around the React Native framework that allows us to develop applications more quickly and easily compared to if we were using bare bones React Native. The first thing we need to do is install the Expo CLI command line utility. Open your terminal and run the following command:

```shell
npm install -g expo-cli
```

Now we can create a new React Native project. I will call my project `ExampleProject` but you can call it whatever you like.

```shell
expo init ExampleProject
```

Expo will prompt you with the following message:

![React Native Expo template options](/content/snippets/how-to-create-react-native-app/2.png)

For this tutorial, I will select blank but I encourage you to do some research and select the best option for your project.

## Running Our React Native App On Expo

Believe it or not, our app is ready to be run! To start our app we must move into the folder which contains our app and then run the start command.

```shell
cd AwesomeProject
npm start
```

When you run ‘npm start’, a new browser window will open at your local host. You will notice a barcode in the lower left hand corner.

![Expo running in browser](/content/snippets/how-to-create-react-native-app/3.png)

We can scan this barcode in the expo app to run our app on a device. Go to either the Apple App Store or the Google Play Store and search for ‘expo client’. See the image below.

![Expo in google play store](/content/snippets/how-to-create-react-native-app/4.png)

Once you download and open the app, you will see an option to “Scan QR Code”. Tap this and scan your code. After the JavaScript loads, you should be able to see the app on your device. If you see “Open up App.js to start working on your app!” you have done it correctly.


Use Expo to create a React Native app fast!

Create a cross platform ios and Android app using React Native and run it using Expo.

Create and Run React Native Mobile App Using Expo in Under 5 Minutes!


## Demo

In this step by step snippet, you will learn how to add a simple `css` hover animation to a `HTML` element to create the following effect:

<FloatUpDivAnimation />

## Code

```html
<div class="flex-wrapper">
  <div class="tag">
    <p>Hover Me</p>
  </div>
  <div class="tag">
    <p>To Float Up</p>
  </div>
</div>

<style>
  .flex-wrapper {
    display: flex;
    height: 5px;
  }

  .tag {
    margin-right: 2px;
    transition: margin 0.2s ease-in-out;
    background-color: gray;
  }

  .tag:hover {
    margin-top: -2;
  }
</style>
```

> The code above is basic `HTML`. Later on in this snippet, I'll show you the [React](https://reactjs.org/) implementation and a [Chakra UI](https://chakra-ui.com/) implementation.

## Steps + Explanation

<SnippetStep number="1" title="Add The HTML Markup" />

The basic `HTML` markup with class names.

```html
<div class="flex-wrapper">
  <div class="tag">
    <p>Hover Me</p>
  </div>
  <div class="tag">
    <p>To Float Up</p>
  </div>
</div>
```

<SnippetStep number="2" title="Define The Wrapper CSS" />

We will make the wrapper `flex` and set the height to `5px`. The height can be whatever height you want.

```html
<style>
  .flex-wrapper {
    display: flex;
    height: 5px;
  }
</style>
```

<SnippetStep number="3" title="Define The Tag CSS" />

Both of these styles are optional and subjective.

```html
<style>
  .tag {
    margin-right: 2px;
    background-color: gray;
  }
</style>
```

<SnippetStep number="4" title="Create The Hover State" />

When the user hovers over the tag, the `margin` will be changed to "-2". If you try this code out, you will notice that the tag will jump up, rather than float nicely.

```html
<style>
  .tag:hover {
    margin-top: -2;
  }
</style>
```

<SnippetStep number="5" title="Add The CSS Transition" />

We can use a `transition` to make the tag float nicely. This transition is added to the `tag` class.

```html
<style>
  .tag {
    margin-right: 2px;
    transition: margin 0.2s ease-in-out; // Add the transition
    background-color: gray;
  }
</style>
```

## Going Further

Let's take a further look at some of the code bits.

### css Transition

#### Definition

> CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized. - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

#### How We Use Transition

In our case, our transition looks like

```css
transition: margin 0.2s ease-in-out;
```

Breaking this down further, we have:

- `margin` - the property we are changing
- `.2s` - the time it takes for the transition to complete
- `ease-in-out` - the easing function

### ease-in-out

#### Definition

> Easing both in and out is akin to a car accelerating and decelerating and, used judiciously, can provide a more dramatic effect than just easing out. - [Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing)

## Common Mistakes

Here are some common mistakes and how to avoid them.

- not having a defined `height`

If you don't have a defined `height`, the tag layout will shift if you hover quickly between the tags. This is because the tag you are hovering over will grow larger causing the wraper to also grow and create a layout shift.

<FloatUpDivAnimationNoHeight />

This is the exact same code as above except we have no defined `height`.

```css
.flex-wrapper {
  display: flex;
  // height: 5px; // <-- this line is removed
}
```

- adding `transition` to the wrong element

Be sure you are adding `transition` to each `tag` and not the `wrapper`.

## React Example

Here is the react code with inline styles.

```javascript
import React from 'react'

export default function make-div-float-up-hover-css() {
    return (
        <div style={{border: '2px dotted', borderColor: 'gray', padding: '10px 0', marginTop: '4px'}}>
            <div style={{display: 'flex', margin: '4px 0', justifyContent: 'center', height: 5}}>
                <div style={{marginRight: 2, transition: 'margin .2s ease-in-out'}} _hover={{marginTop: 2}}>
                    <p>Hover Me</p>
                </div>
                <div style={{marginRight: 2, transition: 'margin .2s ease-in-out'}} _hover={{marginTop: 2}}>
                    <p>To Float Up</p>
                </div>
            </div>
        </div>
    )
}
```

> Some of the specific subjective `css` styles will differ slightly from the example. i.e. `border`, `borderColor`, tag color/size.

## Chakra UI Example

```javascript
import { Flex, Tag, Text, Box, useColorModeValue } from "@chakra-ui/react";

export default function FloatUpDivAnimation() {
  return (
    <Box
      border="2px dotted"
      borderColor={useColorModeValue("gray.300", "gray.100")}
      py={10}
      mt={4}
    >
      <Flex my={4} justifyContent="center" h={5}>
        <Tag
          mr={2}
          size="lg"
          transition="margin .2s ease-in-out"
          _hover={{ mt: "-2" }}
        >
          <Text>Hover Me</Text>
        </Tag>
        <Tag
          mr={2}
          size="lg"
          transition="margin .2s ease-in-out"
          _hover={{ mt: "-2" }}
        >
          <Text>To Float Up</Text>
        </Tag>
      </Flex>
    </Box>
  );
}
```

Add a float up hover transition animation to a div using css.

Pure CSS Float On Hover Effect


## 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


## Introduction

If you have worked with Next.js, you have without a doubt come across the `next/image` component. Introduced in `v10.0.0`, `next/image` is an imporovement over the humble `<img />` HTML tag.

Features of `next/image` include:

- Image lazy loading
- A custom loader
- Quality control
- Placeholder image
- and more!

The `NextImage` component makes the lives of the website visiter much better, however, at times it can be hard to work with and make the lives of the developer harder!

## next/image Not Filling Parent Div

One of the most common issues with `next/image` is that it doesn't fill the parent div. Let's take a look at the following example:

```javascript
import NextImage from 'next/image'

<div height="500px" width="500px">
    <NextImage src="https://picsum.photos/id/1/500/500" layout="fill" />
</div>
```

Note: The code above is "pseudo code". It will not run. `height` and `width` cannot be declared on `div` like I did in the example above.

If I aked you what would happen, you would probably say that the image would render with a height of 500px and a width of 500px. However, this is not the case! The image will have the height and width of itself! If the raw image is 230px by 570px, those will be the dimensions.

## The Solution

I have seen this question asked many times on sites like stackoverflow. Some of the answers aren't even helpful!

- https://stackoverflow.com/questions/67421778/next-js-image-layout-fill-is-broken
- https://github.com/vercel/next.js/discussions/18739
- https://dev.to/tanahmed/next-image-make-image-fill-available-space-272o

The simple solution is to add `position: relative` to the parent div!

```javascript
import NextImage from 'next/image'

<div height="500px" width="500px" position="relative">
    <NextImage src="https://picsum.photos/id/1/500/500" layout="fill" />
</div>
```

Now, the image will take up the width of the parent div!

## Explanation

So why does this work? The default position of a html div tag is [`static`](https://stackoverflow.com/questions/16316834/what-is-the-default-value-of-position-attribute-of-a-div).

> You can even check for yourself and check in Chrome by doing: Click On the Element --> Computed --> Filter --> Show All. [Thanks SO](https://stackoverflow.com/questions/16316834/what-is-the-default-value-of-position-attribute-of-a-div)

Because of this, the image will not fill the parent div.


Spoiler, the answer is position: relative

If next/image does not fill the parent div, you need to use position relative.

Next/Image Doesn't Fill Parent Div!


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.
```

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


## Introduction

[Chakra UI](https://chakra-ui.com) is a component based React library that allows us to rapidly build beautiful, responsive, and accessible user interfaces. One of the components it gives us, is the `Menu` component. Out of the box, to expand the menu, you need to click on the `MenuButton`. In this snippet, I'll show you how to use the `useDisclosure` hook to create a dropdown menu on hover.

## useDisclosure

### Definition

[useDisclosure](https://chakra-ui.com/docs/hooks/use-disclosure) is defined in the Chakra UI documentation as such:

> `useDisclosure` is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such as `Modal`, `AlertDialog`, `Drawer`, etc.

### Import

We can import the `useDisclosure` hook from `@chakra-ui/react`.

```javascript
import { useDisclosure } from "@chakra-ui/react"
```

### Usage

Here is how you would use the `useDisclosure` hook to create a dropdown menu on hover. In the next section, we'll take a look at each line and explain what is happening.

```javascript:Navbar.js
import {
    useDisclosure,
    MenuItem,
    Menu,
    MenuButton,
    MenuList,
} from "@chakra-ui/react"
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'

export default function Navbar() {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <Menu isOpen={isOpen}>
            <MenuButton
                variant="ghost"
                mx={1}
                py={[1, 2, 2]}
                px={4}
                borderRadius={5}
                _hover={{ bg: useColorModeValue("gray.100", "gray.700") }}
                aria-label="Courses"
                fontWeight="normal"
                onMouseEnter={onOpen}
                onMouseLeave={onClose}
            >
                More {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </MenuButton>
            <MenuList onMouseEnter={onOpen} onMouseLeave={onClose}>
                <MenuItem>Menu Item 1</MenuItem>
                <MenuItem>Menu Item 2</MenuItem>
                <MenuItem>Menu Item 3</MenuItem>
            </MenuList>
        </Menu>
    )
}
```

## Explanation

Let's take a more detailed look at the code. First, we are importing the `useDisclosure` hook and the `Menu` components. We are also importing 2 Chakra UI icons to make the dropdown look a bit nicer.

We are using the `useDisclosure` hook like such:

```javascript
const { isOpen, onOpen, onClose } = useDisclosure()
```

We can then use `isOpen`, `onOpen`, and `onClose` to control the state of the dropdown.

- `isOpen` is a boolean that tells us if the dropdown is open or not.
- `onOpen` is a callback function to set a truthy value for the isOpen parameter.
- `onClose` is a callback function to set a falsy value for the isOpen parameter.

### `onMouseEnter` and `onMouseLeave`

At this point, the Menu dropdown works, but there is still no hover effect! To add this we can use `onMouseEnter` and `onMouseLeave` to control the state of the dropdown.

When we use it like such:

```javascript
onMouseEnter={onOpen} 
onMouseLeave={onClose}
```

We are saying when a user hovers over that Component, set the `isOpen` parameter to `true`. When they leave the Component, set the `isOpen` parameter to `false`. Simple!

> The [mouseenter](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event) event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.

> The [mouseleave](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event) event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.

## Conclusion

In this snippet you learned how to use the `useDisclosure` hook paired with `onMouseEnter` and `onMouseLeave` to create a dropdown menu on hover.

Create a  Bootstrap like top nav menu using the useDisclosure hook

How to use Chakra UI's useDisclosure hook to create a dropdown menu on hover.

Chakra UI Menu Dropdown on Hover


## What Are React Hooks?

Released in React 16.8, [React Hooks](https://reactjs.org/docs/hooks-intro.html) allow you to you use state and other React features without writing a class.

Here is a simple example from the reactjs.org website:

```javascript
import React, { useState } from 'react'; // <--- import the hook

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0); // <--- useState is the hook

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

As you can see, we can create a state variable named count in *only* one line using the `useState` hook.

> **Note:** React hooks are imported from React like such: `import { yourHookHere } from 'react'`.

## Using useEffect In Next.JS

Adding the `useEffect()` (or [Effect Hook](https://reactjs.org/docs/hooks-effect.html)) hook in [Next.js](https://nextjs.org/) is not at bad as one would think. Let's take a look at an example. We will use ```useEffect``` to add an event listener
to handle when a user scrolls. We will then log to the console the scrollY value. This is how this website dynamically adds
the css to the nav bar on scroll!

> The useEffect hook is used to perform side effects in function components.

<SnippetStep number="1" title="Import useEffect from react" />

```javascript
import React, { useState, useEffect } from 'react'
```

<SnippetStep number="2" title="Call the method and add code" />

```javascript
useEffect(() => {
        
    })
```

We can add anything we want in here. Let's add our event listeners:

```javascript
useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    })
```

Finally, create the handle scroll method and log the scrollY value to the console:

```javascript
const handleScroll = () => {
        console.log(scrollY)
    }
```

## Conclusion

And that's it! Check out my [YouTube channel](https://youtube.com/benjamincarlson) for more coding tutorials!

Learn what useEffect is learn how to use useEffect in Next.JS.

useEffect() Hook in Next.JS - React Hooks

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.

Connect Firebase To Next.js


## Introduction

Inheritance is an important concept in Object Oriented Programming (OOP). It is a mechanism through
which an object acquires properties and behavior of another object. An object which is inheriting is
called Child and other one is called Parent object. Objects belong to classes, so class having basic
attributes and behavior is called Super Class (Parent class), and Class which is inheriting called
Subclass (child class).

Reuseability is a very powerful feature of OOP, which is ensured through inheritance. Without inheritance a lot code is written again and again. Lets understand it by an example of vehicle.

## Inheritance Example

Every vehicle has some common attributes, like name, model,company, seating capacity, production
year and horse power. There are some specialized type of vehicles which have some extra attributes and
behaviors than basic vehicles, like Electric vehicle has battery capacity, average per kw. Similarly
Gasoline and Hybrid vehicles have specialized attributes and behaviors. Following diagram gives us a
good overview.

![A diagram of Java Inheritance](/content/tutorials/java-inheritance-tutorial/diagram.png)

All three type of vehicles have extra features, including basic feature of vehicle. If there is no
inheritance, then we need to include all attributes and behavior of basic vehicle in all type of
specialized vehicles.

## Java Syntax

Java uses keyword `extends` to inherent a class from its superclass. Using the keyword `extends`, all
public attributes and behaviors are automatically included in child class, there is no need to rewrite all
the code.

### Source Code

Here is the source code in java for above classes.

```java:Vehicle.java
public class Vehicle {
    String vehicle_name;
    String model;
    int seating_capacity;
    int production_year;
    float engine_horse_power;

    public String getVehicle_name() {
        return vehicle_name;
    }
    
    public void setVehicle_name(String vehicle_name) {
        this.vehicle_name = vehicle_name;
    }

    public String getModel() {
        return model;
    }

    public void setModel(String model) {
        this.model = model;
    }

    public int getSeating_capacity() {
        return seating_capacity;
    }

    public void setSeating_capacity(int seating_capacity) {
        this.seating_capacity = seating_capacity;
    }

    public int getProduction_year() {
        return production_year;
    }

    public void setProduction_year(int production_year) {
        this.production_year = production_year;
    }

    public float getEngine_horse_power() {
        return engine_horse_power;
    }

    public void setEngine_horse_power(float engine_horse_power) {
        this.engine_horse_power = engine_horse_power;
    }
}
```

```java:Electric_vehicle.java
public class Electric_vehicle extends vehicle {
    float battery_capacity;
    int num_of_batteries;
    float fuel_average_per_kw;

    public float getBattery_capacity() {
        return battery_capacity;
    }

    public void setBattery_capacity(float battery_capacity) {
        this.battery_capacity = battery_capacity;
    }

    public int getNum_of_batteries() {
        return num_of_batteries;
    }
    
    public void setNum_of_batteries(int num_of_batteries) {
        this.num_of_batteries = num_of_batteries;
    }

    public float getFuel_average_per_kw() {
        return fuel_average_per_kw;
    }

    public void setFuel_average_per_kw(float fuel_average_per_kw) {
        this.fuel_average_per_kw = fuel_average_per_kw;
    }
}
```

```java:Gasoline_vehicle.java
public class Gasoline_vehicle extends vehicle {
    int fuel_tank_capacity;
    int slyinder_engine;
    float fuel_avg_ltr;

    public int getFuel_tank_capacity() {
        return fuel_tank_capacity;
    }

    public void setFuel_tank_capacity(int fuel_tank_capacity) {
        this.fuel_tank_capacity = fuel_tank_capacity;
    }

    public int getSlyinder_engine() {
        return slyinder_engine;
    }

    public void setSlyinder_engine(int slyinder_engine) {
        this.slyinder_engine = slyinder_engine;
    }

    public float getFuel_avg_ltr() {
        return fuel_avg_ltr;
    }

    public void setFuel_avg_ltr(float fuel_avg_ltr) {
        this.fuel_avg_ltr = fuel_avg_ltr;
    }
}
```

```java:Hybrid_vehicle.java
public class Hybrid_vehicle extends vehicle {
    int fuel_tank_capacity;
    int engine_cylinder;
    int battery_capacity;
    float fuel_avg_per_ltr;

    public int getFuel_tank_capacity() {
        return fuel_tank_capacity;
    }

    public void setFuel_tank_capacity(int fuel_tank_capacity) {
        this.fuel_tank_capacity = fuel_tank_capacity;
    }

    public int getEngine_cylinder() {
        return engine_cylinder;
    }

    public void setEngine_cylinder(int engine_cylinder) {
        this.engine_cylinder = engine_cylinder;
    }

    public int getBattery_capacity() {
        return battery_capacity;
    }

    public void setBattery_capacity(int battery_capacity) {
        this.battery_capacity = battery_capacity;
    }

    public float getFuel_avg_per_ltr() {
        return fuel_avg_per_ltr;
    }

    public void setFuel_avg_per_ltr(float fuel_avg_per_ltr) {
        this.fuel_avg_per_ltr = fuel_avg_per_ltr;
    }
}
```

## Multilevel and Multiple Inheritance

Multilevel inheritance means inheritance is at multiple level in classes. There is a parent class A, a child
class B extends A and class C extends B. As C extends B, all properties and behavior of B including its
parent class will also be available in class C.

```java
public class A {………
public class B extends A{…….
public class C extends B{…….
```

In multiple inheritance one class inherents more than one class at the same time. In C++ it is allowed,
but in Java it is not allowed. As multiple inheritance leads to ambiguity.


Learn Java Inheritance through an example.

Learn Java Inheritance definition with a vehice inheritance example and code snippets.

Java Inheritance - A Quickstart


## Introduction

If you're a web developer, you've probably heard of [Jamstack](https://jamstack.org/). Coined in 2015 by the CEO of Netlify, Mathias Biilmann, Jamstack consists of pre-rendered, static HTML that relies on client-side APIs and JavaScript to provide interactive elements. Some of the many pros of Jamstack is that it's fast, scalable, cheap, secure, and SEO friendly.

There are a lot of popular Jamstack frameworks. The main ones are [Next.js](https://nextjs.org/), [Nuxt.js](https://nuxtjs.org/) [Gatsby](https://www.gatsbyjs.com/), [Hugo](https://gohugo.io/), and [Jekyll](https://jekyllrb.com/). Out of these 5, Next.js is by far the largest in terms of market share beating out second place Nuxt.js by over 3x.

In this post, you will learn Next.js by building a developer portfolio complete with a blog. You will also learn some other awesome technologies in the process like chakra-ui, next-mdx-remote, next-seo, Vercel, and more.

![A pie chart comparing the top Jamstack frameworks](/content/tutorials/nextjs-crash-course-build-a-developer-portfolio-website/pie-chart.png)

## Starter Files Overview

To create a Next.js website, we can use the command:

```bash
yarn create next-app
```

When we run this command, all of the necessary files will created.

- The `node_modules` folder holds all of our yarn and npm packages such as react-bootstrap, lodash, and next.
- The pages folder holds, you guessed it, our pages. For example, index.js can be reached at the root of our website. In development, this is http://localhost:3000/. If we created a blog page and called the file blog.js, that page can be reached at http://localhost:3000/blog. There are 2 exceptions to this.
    - `_app.js` is a special next.js file. It is the entry point to our app. At the bare minimum, `_app.js` includes a function that returns the page component. We can also import global css, add custom error handling, and do a couple of other advanced things inside of here. We will be coming back to `_app.js` in a bit when we add chakra-UI for our css framework.
    - The second exception is `_document.js`. This file is optional because Next.js provides it if we don't create it. If we need to add something to the `<html>` or `<body>` tags of our site, we will need to override this file. We can do that easily by creating it and adding the following code:

    ```jsx
    import Document, { Html, Head, Main, NextScript } from 'next/document'

    class MyDocument extends Document {
      static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
      }

      render() {
        return (
          <Html>
            <Head />
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }
    }

    export default MyDocument
    ```

    - One of the nice things about Next.js is its support for dynamic routes. Because we are making a developer portfolio, let's say we have a bunch of projects. We can create a folder called `project` and inside of it, create a file called `[project].js`. The brackets tell Next that this route will be dynamic. Now if we navigate to the following route: [https://localhost/projects/1](https://localhost/projects/1) we don't see any errors.
    - What if we wanted to grab that dynamic route and display it to the user? We can use `next/router` for this. Inside of our file import `useRouter` from `next/router`. Declare a variable `router` and set it equal to the `useRouter()` hook we imported. We can now use this variable to access a bunch of different properties. In our case, we can grab the dynamic route using `router.query`. Now, we can use this anywhere inside of our component.
- The final thing you will notice inside of the pages folder is the api folder. This is where any api routes will live. Because Jamstack does not have a server (it can if you need one), all of the data and authentication can be done using api routes. Next provides us with a simple example, in which we are returning some json. This can be accessed on the route [localhost:3000/api/hello](http://localhost:3000/api/hello). We can also consume this api endpoint in our application and display the data to the user, which we'll see in a bit.
- The next folder is the `public` folder. Inside here we can put any static images, gifs, favicons, txt files, like robots.txt, and xlm files such as our sitemap.
- The last folder is the styles folder. Here we can add any css or sass style sheets. We can go ahead and delete this folder because we will be using chakra-ui along with css in js to style our app.

## Building Our Site

Now that you have a high level understanding, let's start building our developer portfolio.

Let's first add `chakra-ui` to our app by adding the yarn packages.

```bash
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

Now, all we need to do is wrap our app with the `ChakraProvider` in `_app.js`.

```javascript:_app.js
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp
```

### Container.js

The first thing we want to do is create a page layout component that we can use in every page. Create a folder named `components` and inside of it, create a file named `Container.js`.

Go ahead and add the add the following code. The `{children}` text you see is the content for each page.

```javascript:Container.js
import {
    Flex,
    Stack
} from '@chakra-ui/react'
import Navbar from './Navbar'

export default function Container({ children }) {
    return (
        <>
            <Navbar />
            <Stack
                as="main"
                spacing={8}
                justifyContent="center"
                alignItems="flex-start"
                m="0 auto 4rem auto"
                maxWidth="800px"
                px={4}
            >
                <Flex
                    flexDirection="column"
                    justifyContent="flex-start"
                    alignItems="flex-start"
                    maxWidth="800px"
                    w="100%"
                >
                    {children}
                </Flex>
            </Stack>
        </>
    )
}
```

Next, let's create our `<Navbar />` component. Create a file named `Navbar.js` and another file named `DarkModeSwitch.js`. For the dark mode switch, we are simply using chakras `toggleColorMode()` hook to determine the current color mode and style accordingly. I am also using chakra icons in this example so you will need to import those:

```bash
yarn add @chakra-ui/icons
```

Now inside of `Navbar.js`, import the switch component. There are 2 things I want to point out inside of this Navbar that are Next.js specific.

1. We are using `useRouter()` again to style the active item differently. `router.pathname` gives us the slug.
2. We are using `next/link`, which is a special Next.js component. It acts like an `<a>` tag but is for Client-side transitions between routes. It is common to wrap `next/link` around an `<a>` tag. If you do this, be sure to use the `passHref` property otherwise you will render 2 `<a>` tags and hurt your SEO!

Now that our page container component is complete, let's import it into `index.html`. Let's add some basic information to this home page like name, description, and a call to action.

### API Routes

Let's take a look at one of the best features of Next.js, api routes. Earlier in this post, we took a look at `hello.js`, which was a simple api route. Let's create our own api route to fetch our GitHub repositories from our GitHub account.

We can do this using `swr`. SWR is a React hook created by the Next.js team. It handles caching, revalidation, focus tracking, refetching on interval, and more. To use it, we first need to import it:

```jsx
import useSWR from "swr";
```

We can then use it like such:

```jsx
const { data, error } = useSWR("/api/github");
```

We now have the data returned stored inside of a variable `data` and if we have an error it will be stored inside the variable `error`. The data is coming from the api route `github.js`, a file we will create momentarily. Let's first add three return statements to handle our different states.

1. An error state
2. A loading state
3. And a success state

```jsx
if (error)
  return (
    <Container>
      <Text>Failed to load projects!</Text>
    </Container>
  );
if (!data)
  return (
    <Container>
      <Text>Loading...</Text>
    </Container>
  );
return (
  <Container>
    <Heading as="h1">Projects</Heading>
  </Container>
);
```

Now inside of the `api` folder, create a file named `github.js`. The syntax for an api route is as such:

```jsx
export default async (req, res) => {
  return res.status(200).json({});
};
```

We can now use vanilla javascript to fetch data from the GitHub api. As always, refer to GitHubs official docs for any help with this.

Back inside of `projects.js` we can map over the data and display it.

Recall, earlier in this post, we made a dynamic route accessible on `localhost:3000/projects/[pid]`. We can take advantage of that here by linking to that route passing in the project name. Then from this page, we can fetch additional data on that project or we could pass it in as part of the query string.

### Blog

To create a blog, we will use next-mdx-remote.

```bash
yarn add next-mdx-remote
```

We can store blog posts where ever we want because we will be using `getStaticProps()` to fetch them. In this post, and in most cases, storing them locally is the best option. Let's create a folder called `posts` and add our first blog post. We can store the important parts of the post like the title, description and published date in whats called the `frontMatter`.

```jsx
---
title: "Post Title"
description: "Post 1 description"
publishedAt: "2021-07-04"
---
```

The rest of the content can be added below as markdown. One of the cool things about using `mdx` is that you can add interactive javascript components inside of the post!

Now that we have a blog post, we can create a page named `blog.js` and inside of here we'll query all of our posts and display them in a list view.

Before we do this, we will need some information regarding the path to the posts. Let's make a new folder called `lib` and a new file named `mdxUtils.js`. This file will export 2 variables: the path to our blog posts, and a list of all the mdx files inside of this path. Be sure to add `fs` and `path` via yarn.

```bash
yarn add fs path
```

Inside of our `blog.js` page, import both of those variables as well as `fs`, `matter`, and `path`.

```bash
yarn add gray-matter
```

Inside of `getStaticProps` we can declare a variable `posts` and map over all of our blog posts which are stored in the `postFilePaths` variable. We can get the source of each post using `fs` and then extract the content and data using `gray-matter`. Finally, return posts as a prop.

Now, we can pass the posts prop into our component and map over each of the posts displaying them to the user. We are using the `as` property on `next/link` which is the path shown in the browser URL bar.

You can see that we can grab any of the `frontMatter` by using `{post.data.title}`.

### Individual Blog Posts

The final step is to make a dynamic page for each individual blog post. Inside of our `blog` folder, create a file named `[slug.js]`. Add the following imports and our basic post page body. You can see that we are passing in `source` and `frontMatter`. This is being fetched via `getStaticProps` and `getStaticPaths`. Inside of `getStaticPaths`, declare a variable `paths` and set it equal to `postFilePaths`. Recall this is being imported from `mdxUtils.js` and represents a list of all mdx files inside the `POSTS_PATH` directory. Next, remove file extensions for page paths and finally map the path into the static paths object required by Next.js. Then return the paths and set fallback to false.

Inside of `getStaticProps`, we are doing something very similar to what we did in `blog.js`, instead here we are only working with one blog post - the requested post. Declare a variable `postFilePath` and set it to the current url. Grab the source of the post using `fs`. Next, parse through the source using `gray-matter`. Finally, serialize the content and pass in any `mdxOptions` such as prism for code styling. Then, return the source and frontMatter.

In our page component, pass both of these variables in. We are setting the content of the post by the line: 

```javascript:blog.js
<MDXRemote {...source} components={components} />
```

Now, you are probably wondering what the components variable is. That is where the markdown maps to its html element and it is also where we pass in our custom components. For example, we can declare a custom a tag like such: 

```javascript:blog.js
a: (props) => <Link {...props} color={useColorModeValue("blue.700", "blue.400")} />,
```

We can also set our `DarkModeSwitch` equal to our darkmode switch component in this line:

```javascript:blog.js
DarkModeSwitch: dynamic(() => import('../../components/DarkModeSwitch')),
```

You should now be able to visit individual blog posts!

### Adding SEO

We will be using the `next-seo` package to add some SEO to our blog.

```javascript
yarn add next-seo
```

Create a new file called `next-seo.config.js`. Inside of here is where we can add a our default page title, description, etc.

Inside of `_app.js`, import this and add it right above our page component. Now we can add it to each of our pages.

To add SEO to our blog, we can create a file named `BlogSEO.js` and add our seo. We can use the article tag to tell Google that this is an article. Now, inside of `[slug].js` add our SEO. We need to pass in the page url dynamically so we can use the `useRouter()` hook to help us with this.

```jsx
import BlogSeo from '../../components/BlogSEO'
import { useRouter } from 'next/router'

const router = useRouter();
const slug = router.asPath.replace('/blog', '')

<BlogSeo url={`https://example.io/blog${slug}`} {...frontMatter} />
```

## Deploy To Vercel

After all this work, our website is now complete. Most tutorials would stop here but I am going to show you how to ship this website. Vercel is the company behind Next.js so it makes sense to deploy it there. Navigate to [https://vercel.com](https://vercel.com). If you don't have an account, go ahead and create one. It is 100% free forever on the hobby plan. Before we deploy our website, it needs to be on GitHub or another git platform. Once that is done, click the new project button and select your project repository. You will need to add the vercel app to your GitHub account so it has permissions. Give your app a project name if you want a different name from your GitHub repo, and add any environment variables if you have any. We did not use any in this crash course. Finally, click deploy! After a few minutes you should be able to see your website live.

## Conclusion

I hope you enjoyed this crash course of Next.js. We only covered the basics and skimmed past a lot of cool features so use the resources at the beginning og this post to keep learning.


Learn Next.js by building a developer blog/portfolio.

Build a developer blog/portfolio using Next.js, Chakra UI, next-mdx-remote, next-seo and deploy it to Vercel in this Next.js crash course.

Next.js Crash Course


## Introduction

Building a todo app is common practice when you are trying to learn a new tech stack. In this tutorial, I'll show you how to build a todo app using the follwing stack:

- [Next.js](https://nextjs.org) for the JavaScript framework
- [Chakra-UI](https://chakra-ui.com) for the CSS framework
- [Firebase](https://firebase.google.com) for the auth and backend
- [React hooks](https://reactjs.org/docs/hooks-intro.html) for handling data locally

Let's jump into coding!

## Bootstrapping With `next-firebase-auth`

I will be building this like any other project. This means, I will not be starting from scratch. Instead, we will be cloning [this repo](https://github.com/gladly-team/next-firebase-auth) which has Firebase Auth already implemented. Go ahead and clone the repo and then `cd` into the `example` folder. This is the Next.js source code.

As a reminder, you can clone this repo from your terminal using:

```bash
git clone https://github.com/gladly-team/next-firebase-auth.git

then...

cd example
```

Once you have the starter files, feel free to open them up in the IDE of your choice.

### .env.local

You will notice that if you try to run the app (using `yarn dev`) you will get an error. This is because we need to edit the secret values inside of `.env.local.example` to our Firebase values. First, copy everything inside of `.env.local.example` into a new file named `.env.local`.

```bash:.env.local.example
# Copy this file as ".env.local".
# Update these with your Firebase app's values.
FIREBASE_CLIENT_EMAIL=my-example-app-email@example.com
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=MyExampleAppAPIKey123
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=my-example-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://my-example-app.firebaseio.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=my-example-app-id

# Your Firebase private key.
# When using Vercel, add the private key with double quotes
# via the CLI, not the Vercel dashboard:
#   vercel secrets add firebase-private-key '"my-key-here"'
# Then, use `JSON.parse` in the app. See:
# https://github.com/vercel/vercel/issues/749#issuecomment-707515089
FIREBASE_PRIVATE_KEY='"some-key-here"'

# Secrets used to sign cookies.
COOKIE_SECRET_CURRENT=someSecretValue
COOKIE_SECRET_PREVIOUS=anotherSecretValue

# Cookie options.
NEXT_PUBLIC_COOKIE_SECURE=false # set to true in HTTPS environment
```

Next, create a Firebase project and create a web project inside of it.

![Image of creating a firebase web app](/content/tutorials/todo-app-nextjs-chakraui-firebase/create-web-app.png)

Go ahead and turn on Email/Password auth, cloud firestore and realtime db.

![Image of left sidebar](/content/tutorials/todo-app-nextjs-chakraui-firebase/left-sidebar.png)

Now, go into project settings. In the general tab, you will find most of your secret values.

![Image of secrets](/content/tutorials/todo-app-nextjs-chakraui-firebase/secrets.png)

To get the remaining values, click the "Service Accounts" tab and "Generate a New Private Key." Open the file that is downloaded. The remaining secret values such as the api key (the super long string) can be found in here.

![Image of generating a private key](/content/tutorials/todo-app-nextjs-chakraui-firebase/generate-private-key.png)

> For the 2 cookie secrets, simply generate 2 random strings!

At this point, you should be able to log into the site using email and password.

## Adding Chakra-UI

### Add Dependencies

Once this is complete, we can add Chakra-UI to our project. First add the dependencies:

```bash
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

### Wrap With ChakraProvider

Next, wrap `_app.js` with the `<ChakraProvider>`.

```javascript:_app.js
import React from 'react'
import '../styles/globals.css'
import initAuth from '../utils/initAuth'
import { ChakraProvider } from "@chakra-ui/react" // <- add this

initAuth()

function MyApp({ Component, pageProps }) {
  // eslint-disable-next-line react/jsx-props-no-spreading
  return (
    <ChakraProvider> // <- add this
      <Component {...pageProps} />
    </ChakraProvider> // <- add this
  )
}

export default MyApp
```

## Creating `todo.js`

All of the code in this turoial will be added in a file named `todo.js`. You can go ahead and create this inside of the `pages` directory.
We will start by adding a bunch of imports.

### Adding The Imports

```javascript:todo.js
import React, { useState, useEffect } from 'react'
import {
    Flex,
    Heading,
    InputGroup,
    InputLeftElement,
    Input,
    Button,
    Text,
    IconButton,
    Divider,
} from "@chakra-ui/react"
import { AddIcon, DeleteIcon, StarIcon } from "@chakra-ui/icons"
import {
    useAuthUser,
    withAuthUser,
    withAuthUserTokenSSR,
    AuthAction,
} from 'next-firebase-auth'
import getAbsoluteURL from '../utils/getAbsoluteURL'
import firebase from 'firebase/app'
import 'firebase/firestore'
```

- line 1 are react imports
- lines 2-13 are chakra ui imports
- lines 14-20 are `next-firebase-auth` imports
- lines 21-22 are firebase imports

### Defining Our Body

Next, define our react functional component with some basic styles:

```javascript:todo.js
// imports here

const Todo = () => {
    return (
        <Flex flexDir="column" maxW={800} align="center" justify="center" minH="100vh" m="auto" px={4}>

        </Flex>
    )
}

export const getServerSideProps = withAuthUserTokenSSR()

export default withAuthUser()(Todo)
```

I'll go ahead and add the rest of the UI elements.

```javascript:todo.js
<Flex flexDir="column" maxW={800} align="center" justify="center" minH="100vh" m="auto" px={4}>
    <Flex justify="space-between" w="100%" align="center">
        <Heading mb={4}>Welcome, {AuthUser.email}!</Heading>
        <IconButton ml={2} onClick={AuthUser.signOut} icon={<StarIcon />} />
    </Flex>

        <InputGroup>
            <InputLeftElement
                pointerEvents="none"
                children={<AddIcon color="gray.300" />}
            />
            <Input type="text" placeholder="Learn Chakra-UI & Next.js" />
            <Button
                ml={2}
            >
                Add Todo
            </Button>
        </InputGroup>
</Flex>
```

If you run the app you should see some nice output!

## Writing Data to Firebase's Cloud Firestore

### useState

To write data to cloud firestore, we will first need to get the data from the user and hold it locally. We can use `useState` for this. Add the
following code:

```javascript:todo.js
const [input, setInput] = useState('')
const [todos, setTodos] = useState([])
```

Now we can store the users input value in the `input` variable and when we fetch the data back, we can store it in the
`todos` variable.

### onClick + onChange

To get the data, we can use `onClick` and `onChange`.

```javascript:todo.js
<InputGroup>
        <InputLeftElement
            pointerEvents="none"
            children={<AddIcon color="gray.300" />}
        />
        <Input type="text" onChange={(e) => setInput(e.target.value)} placeholder="Learn Chakra-UI & Next.js" />
        <Button
            ml={2}
            onClick={() => sendData()}
        >
            Add Todo
        </Button>
    </InputGroup>
```

If you add some `console.logs` and type in some data, you will see that this works! The next step is to create the `sendData` method and send the data to Firebase.

We can wrap everything inside of a try catch loop to handle errors. To interact with Firestore, we can use `firebase.firestore()`.

We will store each users todo's inside of their own collection using their id. Each individual toto will be stored inside a doc, using the todo name and the doc name.

### Sending The Data

Lastly, use `.set` to set the data! We'll pass in the `timestamp` as well so we can order todos better later on.

```javascript:todo.js
const sendData = () => {
        try {
            // try to update doc
            firebase
                .firestore()
                .collection(AuthUser.id) // each user will have their own collection
                .doc(input) // set the collection name to the input so that we can easily delete it later on
                .set({
                    todo: input,
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                })
                .then(console.log('Data was successfully sent to cloud firestore!'))
        } catch (error) {
            console.log(error)
        }
    }
```

## Fetching Data from Firebase's Cloud Firestore

We can fetch data in a similar fashon. We'll fetch everything inside of `useEffect` so we can listen to changes in real time.

```javascript:todo.js
useEffect(() => {
        AuthUser.id &&
            firebase
                .firestore()
                .collection(AuthUser.id)
                .orderBy('timestamp', 'desc')
                .onSnapshot(snapshot => {
                    setTodos(snapshot.docs.map(doc => doc.data().todo))
                })
    })
```

Now, we have all the todo items inside of the `todos` variable! Let's map over them and display it to the user.

### Displaying Todos To User

```javascript:todo.js
{todos.map((t, i) => {
                return (
                    <>
                        {i > 0 && <Divider />}
                        <Flex
                            key={i}
                            w="100%"
                            p={5}
                            my={2}
                            align="center"
                            borderRadius={5}
                            justifyContent="space-between"
                        >
                            <Flex align="center">
                                <Text fontSize="xl" mr={4}>{i + 1}.</Text>
                                <Text>{t}</Text>
                            </Flex>
                            <IconButton onClick={() => deleteTodo(t)} icon={<DeleteIcon />} />
                        </Flex>
                    </>
                )
            })}
```

## Adding Delete

Lastly, let's add delete functionality. as you can see, we already have the `deleteTodo` method. Let's create this above.

To delete, we can grab the collection, grab the doc, and call `.delete`. Recall the collection name is the user's id and the doc name is the todo.

```javascript:todo.js
const deleteTodo = (t) => {
        try {
            firebase
                .firestore()
                .collection(AuthUser.id)
                .doc(t)
                .delete()
                .then(console.log('Data was successfully deleted!'))
        } catch (error) {
            console.log(error)
        }
    }
```

## Conclusion

We have now created a todo web app with Firebase Auth, Next.js as the JS framework, Chakra UI as the CSS framework, Firebase Cloud Firestore as the backend, and React Hooks to handle data locally. If you want to look at any of these in more detail, check out the recommended posts below!


Use the latest and greatest technologies to build a todo web app.

Create a todo web app using Next.js, Firebase, Chakra UI, and React hooks (useState and useEffect). This is a full stack app with the following features: write to cloud firestore, read data using snapshot + useEffect, delete a todo, sign in with different accounts and protect data.

#nextjs