
Tracking analytics has never been easier.

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


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


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


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

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


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


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

## Setup

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

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

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

## Imports

We will start by importing everything we need.

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

## Adding Desktop Content

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

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

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

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

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

## Adding Mobile Content

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

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

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

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

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

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

## Using useState To Open And Close Navigation

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

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

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

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

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

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

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

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

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

The important styles we added:

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

The rest is subjective.

## Completed Code

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

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


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

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

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

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

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

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

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

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


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

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

Chakra-UI Responsive Navigation Bar


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

Seamlessly add Firebase to your Next.js project.

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

Content

Company

Learn to code 👨‍💻 and ship 🚀 your app for free.

Coffeeclass ☕ takes complex programming concepts and presents them in an easy to learn manner. Browse snippets, tutorials, or learn a new skill.

Browse The Latest Tutorials

Next.js Crash Course

Connect Firebase To Next.js

Only Have 5 Minutes? Check Out Some Snippets!

Add Splitbee Analytics To Next.js

Create A Flutter Bottom Navigation Bar

Next.js + MDX Pages Quickstart

How To Use Firebase As Flutter's Backend

What Is Coffeeclass?