
Welcome to the first post in my new "Build a Blog Site with Next.js and Firebase" series! This series is pretty similar to a series I wrote in 2019: ["Build a React & Firebase Blog Site"](https://ashleemboyer.com/series/react-firebase-blog). Because it's been well over a year since I published that series, I decided to create a new series and use the Next.js React framework this time. It's a fun framework to use, and I know so many people that are curious about it. I hope you enjoy the series!

- _[Read Part 2 of the series](/blog/nextjs-firebase-blog-02)_
- _[Read Part 3 of the series](/blog/nextjs-firebase-blog-03)_
- _[Read Part 4 of the series](/blog/nextjs-firebase-blog-04)_
- _[Read Part 5 of the series](/blog/nextjs-firebase-blog-05)_

---

## Firebase Setup

First, let's create a new project in Firebase. _There's a video after these steps that visually walks though how to do this._

1. Go to [console.firebase.google.com](https://console.firebase.google.com) and make sure you're logged in with the Google account you want to use.
2. Click the card that says "Add project". It should be the first one listed.
3. Enter a project name. I'm going to use `nextjs-firebase-blog` for the entire series.
4. Toggle "Enable Google Analytics for this project" to off.
5. Click "Create project".
6. Click "Continue" when your new project is ready.

<iframe title="Create a New Firebase Project" width="100%" height="350" src="https://www.youtube-nocookie.com/embed/2w5BV9ft82g" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

Now that we have a project, we can set up the database and add some test data to it. _There's a video after these steps that visually walks though how to do this._

1. Click "Realtime Database" in the left-hand sidebar.
2. Click the "Create Database" button.
3. Keep the given location setting and click the "Next" button.
4. Select the "Start in test mode" option.
5. Click the "Enable" button.

<iframe title="Enable Firebase Realtime Database" width="100%" height="350" src="https://www.youtube-nocookie.com/embed/DQU0rcHce1c" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

Since we won't have an interface for creating new posts until after Part 2 of this series, we need to add some test data to our database. Firebase makes it easy to import data from a JSON file. That's how we're going to add our test data. _There's a video after these steps that visually walks though how to do this._

1. Wherever you store code on your machine, create a new folder for this project. I'm calling mine `nextjs-firebase-blog`.
2. Add a file to it called `data.json`.
3. Paste this block of code in the JSON file:

```json
{
  "posts": {
    "my-first-blog-post": {
      "content": "Cupcake ipsum dolor sit amet carrot cake. Sweet tootsie roll marzipan jelly-o cake cotton candy pie. Jelly-o powder tootsie roll. Toffee gummi bears muffin powder caramels dragée soufflé. Halvah gummies gingerbread jelly jujubes. Sweet toffee lollipop chocolate cake.",
      "coverImage": "http://placekitten.com/g/700/400",
      "coverImageAlt": "A random kitten from PlaceKitten.com",
      "dateCreated": 1609718400000,
      "slug": "my-first-blog-post",
      "title": "My First Blog Post"
    },
    "my-second-blog-post": {
      "content": "Cupcake ipsum dolor sit amet carrot cake. Sweet tootsie roll marzipan jelly-o cake cotton candy pie. Jelly-o powder tootsie roll. Toffee gummi bears muffin powder caramels dragée soufflé. Halvah gummies gingerbread jelly jujubes. Sweet toffee lollipop chocolate cake.",
      "coverImage": "http://placekitten.com/g/700/500",
      "coverImageAlt": "A random kitten from PlaceKitten.com",
      "dateCreated": 1609459200000,
      "slug": "my-second-blog-post",
      "title": "My Second Blog Post"
    }
  }
}
```

4. Go to your Realtime Database in Firebase.
5. Click the vertical ellipsis menu icon. It's to the right of a circle minus sign icon.
6. Select the "Import JSON" menu option.
7. Browse for the `data.json` file you just created.
8. Click the "Import" button.

<iframe title="Add Test Data to Firebasebase Realtime Database" width="100%" height="350" src="https://www.youtube-nocookie.com/embed/gWp1Jn9ed5E" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Next.js Setup

Let's spend some time in our terminal and code editor now. We need to add some inital packages and files to the same place that we created our `data.json` file in the previous section. The next few steps are commands that need to be run in a terminal, so go ahead and fire it up if you haven't already.

_Make sure you run the commands in steps 1 and 2 in your `nextjs-firebase-blog` directory._

1. `npm init -y` to set up your `package.json` file.
2. `npm install next react react-dom sass firebase` to install all the necessary packages.
3. Open `package.json` in your code editor.
4. Update the `"scripts"` property to have `dev`, `build`, and `start` properties like this:

```json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
```

5. Add a `pages` directory.
6. Add `_app.js` to the `pages` directory and write this code in it:

```jsx
// This is called a "Custom `App` in Next.js.
// We use it for global styles and will later use it for loading an
// icon library. You can read more about this in the Next.js docs at:
// https://nextjs.org/docs/advanced-features/custom-app

import '@styles/global.scss';

const App = ({ Component, pageProps }) => <Component {...pageProps} />;

export default App;
```

7. Add a `jsconfig.json` file in the root of the project:

```json
// This file is for absolute imports and module path aliases.
// It'll help us keep our import statements nice and clean!
// You can read more about this in the Next.js docs at:
// https://nextjs.org/docs/advanced-features/module-path-aliases

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@styles/*": ["styles/*"]
    }
  }
}
```

8. Add a `styles` directory in the root of the project.
9. Add `global.scss` to the `styles` directory:

```scss
// This is where global site styles go.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
```

10. Add `index.module.scss` to the `styles` directory:

```scss
// These styles go with the index page.

.HomePage {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;

  h1 {
    margin-bottom: 32px;
  }

  article {
    border: 1px solid black;
    border-radius: 12px;
    overflow: hidden;

    &:not(:last-child) {
      margin-bottom: 32px;
    }

    div {
      padding: 16px;

      h2 {
        margin-top: 0;
        margin-bottom: 4px;
      }

      span {
        display: block;
        margin-bottom: 12px;
      }

      p {
        margin: 0;
      }
    }
  }
}
```

11. Add `index.js` to the `pages` directory:

```jsx
// This component represents the index page for the site. You
// can read more about Pages in the Next.js docs at:
// https://nextjs.org/docs/basic-features/pages

import styles from '@styles/index.module.scss';

const HomePage = () => (
  <div className={styles.HomePage}>
    <h1>Hello from HomePage!</h1>
  </div>
);

export default HomePage;
```

12. In your terminal, start the application in development mode with `npm run dev`.
13. Go to [http://localhost:3000](http://localhost:3000) in your browser. It should look like this (mine is zoomed in for visibility):

[![A white webpage that reads "Hello from HomePage!" in black text.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-01%2FCleanShot%202021-01-03%20at%2023.20.21.png?alt=media&token=a9c0cbb2-703d-48c5-8f31-5128830f06b1)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-01%2FCleanShot%202021-01-03%20at%2023.20.21.png?alt=media&token=a9c0cbb2-703d-48c5-8f31-5128830f06b1)

## Create a Repository and Commit Progress

This is a great place to stop and commit because you have a working version of your app. You want this code in a repository for a quite a few reasons:

- A clear commit history is an efficient way to remind yourself what you did.
- You can access the code from multiple machines.
- Other people will be able to see what you've created. ([Learning out loud](https://ashleemboyer.com/what-it-means-to-learn-out-loud) is definitely a good thing!)
- Vercel makes it easy to deploy from GitHub repositories.

1. Go to [https://github.com/new](https://github.com/new)
2. Name your repository `nextjs-firebase-blog`.
3. Add a description like "My awesome blog built with Next.js and Firebase!"
4. Click the "Create repository" button.

_The next few steps will be run in your terminal._

5. `git init` to initialize a Git repository in your project directory.
6. Add a `.gitignore` file so we can avoid adding unnecessary files to the repository:

```gitignore
.next
node_modules
```

7. `git add .` to stage all of your files for a commit.
8. `git commit -m "First commit"` to create the commit and add a message to it.
9. `git branch -M main` to rename the `master` branch to `main`
10. `git remote add origin <shortname>` where `<shortname>` is the one associated with your repository.
11. `git push -u origin main` to push your commits to the repository.
12. Refresh GitHub in your browser and your repository should have all of your code.

[![View of the code repository at GitHub.com.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-01%2FCleanShot%202021-01-04%20at%2000.14.23.png?alt=media&token=ec15ed14-f50d-472a-9b76-066f6a794be1)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-01%2FCleanShot%202021-01-04%20at%2000.14.23.png?alt=media&token=ec15ed14-f50d-472a-9b76-066f6a794be1)

## Display the Test Data

In order to read data from our Firebase Realtime Database, we need to initialize a Firebase app within our site. This will require three config variables that Firebase provides: `apiKey`, `databaseURL`, and `projectId`. We'll store these variables in an environment file and git ignore it so we don't accidentally share secret information with the public.

1. Update your `.gitignore` to include `.env`:

```gitignore
.next
node_modules
.env
```

2. Go to your project settings in the Firebase console.
3. Scroll to the bottom of the page where it says "Your apps."
4. Click the `</>` button to register your app for web.
5. For "App nickname", enter `nextjs-firebase-blog`.
6. Click the "Register app" button and keep this page open.
7. Add a `.env` file in the root of the project and paste your `apiKey`, `databaseURL`, and `projectId` in the correct places:

```env
NEXT_PUBLIC_FIREBASE_API_KEY=<your api key>
NEXT_PUBLIC_FIREBASE_DATABASE_URL=<your database url>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your project id>
```

8. You can leave this page by clicking the "Continue to console" button.
9. Add a `lib` directory in the root of the project.
10. Add a `firebase.js` file:

```js
// This is where we'll add all of the functions for interacting with
// Firebase services in our app.

import firebase from 'firebase/app';
import 'firebase/database';

const initFirebase = async () => {
  // This check prevents us from initializing more than one app.
  if (!firebase.apps.length) {
    firebase.initializeApp({
      apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
      databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    });
  }
};

// Gets all posts from the database in reverse chronological order.
export const getPosts = async () => {
  // Because our exported functions can be called at any time from
  // any place in our app, we need to make sure we've initialized
  // a Firebase app every time these functions are invoked.
  initFirebase();

  const posts = await firebase
    .database()
    .ref('/posts')
    .orderByChild('dateCreated')
    .once('value')
    .then((snapshot) => {
      const snapshotVal = snapshot.val();

      const result = [];
      for (var slug in snapshotVal) {
        const post = snapshotVal[slug];
        result.push(post);
      }

      return result.reverse();
    });

  return posts;
};
```

11. Update `jsconfig.json` for the new `lib` directory:

```json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@lib/*": ["lib/*"],
      "@styles/*": ["styles/*"]
    }
  }
}
```

12. Import the `getPosts` in `pages/index.js` as the first import:

```jsx
import { getPosts } from '@lib/firebase';
```

13. Below the imports, add a helper function for formatting the date of a post:

```js
const getFormattedDate = (milliseconds) => {
  const formatOptions = {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    year: 'numeric',
    timeZone: 'UTC',
  };
  const date = new Date(milliseconds);
  return date.toLocaleDateString(undefined, formatOptions);
};
```

14. After the `HomePage` component initialization and before `export default HomePage`, add `getServerSideProps` for fetching posts from the database:

```js
// This is for fetching data every time the page is visited. We do this
// so that we don't have to redploy the site every time we add a blog post.
// You can read more about this in the Next.js docs at:
// https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

export async function getServerSideProps() {
  const posts = await getPosts();

  return {
    props: {
      posts,
    },
  };
}
```

15. Update the `HomePage` component to accept a `posts` prop and to render the given `posts`:

```jsx
const HomePage = ({ posts }) => (
  <div className={styles.HomePage}>
    <h1>Blog Posts</h1>
    {posts.map((post) => (
      <article key={post.slug}>
        <img src={post.coverImage} alt={post.coverImageAlt} />
        <div>
          <h2>{post.title}</h2>
          <span>{getFormattedDate(post.dateCreated)}</span>
          <p
            dangerouslySetInnerHTML={{
              __html: `${post.content.substring(0, 200)}...`,
            }}
          ></p>
        </div>
      </article>
    ))}
  </div>
);
```

16. Stop the development server if it's running.
17. `npm run dev` to start the development server.
18. Go to [http://localhost:3000/](http://localhost:3000/) in your browser and it should look something like this:

[![The blog site showing a "Blog Posts" heading and a list of two posts showing the test data.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-01%2FCleanShot%202021-01-04%20at%2000.43.45.png?alt=media&token=5574ca53-9e33-49e2-aab0-9b8a8b23f150)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-01%2FCleanShot%202021-01-04%20at%2000.43.45.png?alt=media&token=5574ca53-9e33-49e2-aab0-9b8a8b23f150)

19. You've done quite a bit of work now, so make sure you commit and push it in your terminal:

```bash
git add .
git commit -m "Showing test data on HomePage"
git push
```

## Deploy to Vercel

Woot! We're at the last step! We've got a basic little blog site that lists posts from a Firebase Realtime Database. You should be so proud of yourself. Let's get this deployed to Vercel so you can show it off! _There's a video after these steps that visually walks though how to do this._

1. Go to [vercel.com/new](https://vercel.com/new). You may have to create an account.
2. Find your `nextjs-firebase-blog` repository and click the "Import" button next to it.
3. Select your personal account for the Vercel Scope.
4. Click the "Deploy" button.
5. Wait for the deploy to finish, but don't visit the site just yet.

<iframe title="Deploy Project to Vercel" width="100%" height="350" src="https://www.youtube-nocookie.com/embed/JyoalVxk0ew" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

6. Go the Project Settings in Vercel.
7. Click Environment Variables from the left-hand sidebar.
8. Scroll down to the "Add New" section.
9. Choose "Plaintext".
10. For the `name`, put `NEXT_PUBLIC_FIREBASE_API_KEY`.
11. For the `value`, enter the value you have for the variable from your `.env` file.
12. Click the "Save" button.
13. Repeat steps 9-12 for the other two variables in your `.env` file: `NEXT_PUBLIC_FIREBASE_DATABASE_URL` and `NEXT_PUBLIC_FIREBASE_PROJECT_ID`.

You should now have 3 environment variables that match the ones in your `.env` file. A deployment is required for these changes to take effect, so let's finish up with that last task. _There's a video after these steps that visually walks though how to do this._

1. Go to your project overview.
2. Scroll to the Production Deployment section.
3. Under "DEPLOYMENT" in that section, click the link. It's the first one listed. You'll be taken to the Overview page for this specific deploy.
4. Click the vertical ellipsis menu directly to the left of the "Visit" button.
5. Choose the "Redploy" menu option.
6. Click the "Redeploy" button in the modal that pops up.
7. Wait for the deploy to finish.
8. Click the "Visit" button when it appears.
9. Celebrate!!! You did it!!! <span role="img" aria-label="party popper emoji">🎉</span>

<iframe title="Add Environment Variables in Vercel and Redeploy to Effect Changes" width="100%" height="350" src="https://www.youtube-nocookie.com/embed/Tgo8NPEGxis" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>


Learn how to build a blog site with Next.js and Firebase.

Build a Blog Site with Next.js and Firebase

Build a Blog Site with Next.js and Firebase Part 1 - Getting Set Up


Welcome to the second post in my new "Build a Blog Site with Next.js and Firebase" series! This series is pretty similar to a series I wrote in 2019: ["Build a React & Firebase Blog Site"](/series/react-firebase-blog). Because it's been well over a year since I published that series, I decided to create a new series and use the Next.js React framework this time. It's a fun framework to use, and I know so many people that are curious about it. I hope you enjoy the series!

- _[Read Part 1 of the series](/blog/nextjs-firebase-blog-01)_
- _[Read Part 3 of the series](/blog/nextjs-firebase-blog-03)_
- _[Read Part 4 of the series](/blog/nextjs-firebase-blog-04)_
- _[Read Part 5 of the series](/blog/nextjs-firebase-blog-05)_

---

## Add a Page for Creating Posts

First, let's add styles and a minimal component for our new `CreatePage` component.

1. Add `create.module.scss` in the `styles` directory:

```scss
.CreatePage {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;

  form {
    padding: 16px;

    h1 {
      margin-top: 0;
      margin-bottom: 24px;
    }

    input {
      margin-bottom: 16px;
    }

    textarea {
      height: 300px;
    }

    button {
      display: block;
      margin-right: 0;
      margin-left: auto;
      margin-top: 24px;
    }
  }
}
```

2. Add `create.js` in the `pages` directory:

```jsx
import styles from './create.module.scss';

const CreatePage = () => (
  <div styles={className.CreatePage}>
    <h1>Hello, from CreatePage!</h1>
  </div>
);

export default CreatePage;
```

3. Go to [http://localhost:3000/create](http://localhost:3000/create) in your browser. There's not much here because we first want to check that the files we've added work correctly before we add too much functionality. It should look like this:

[![A white webpage that reads "Hello from CreatePage!" in black text.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-02%2FCleanShot%202021-01-10%20at%2014.13.47.png?alt=media&token=fb6d2174-34f6-4cc6-bf74-f23bbac592f9)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-02%2FCleanShot%202021-01-10%20at%2014.13.47.png?alt=media&token=fb6d2174-34f6-4cc6-bf74-f23bbac592f9)

4. Commit and push your work to your repository:

```
git add .
git commit -m "Adding basic CreatePage component"
git push
```

## Make a Form for Describing Posts

Now that we've successfully added a page for creating posts, we can add a handful of inputs we'll use to describe posts. Let's review what attributes our posts have so we can decide what inputs we need. You can double-check the "shape" of posts by opening up your Firebase Realtime Database and expanding the objects in it. You should see these attributes (they're listed in alphabetical order in Firebase):

- `title`
- `slug`
- `dateCreated`
- `coverImage`
- `coverImageAlt`
- `content`

Of all of these attributes, there's one we can auto-generate when that "Create" button is clicked and don't need an input for: `dateCreated`. The rest need to be text `<input>`s and the `content` attribute will need a `<textarea>` so it's easy to write a lot of text. Let's add some styles for these new controls we're adding and then add them to the `CreatePage`.

1. Add styles for the new elements we're adding to the end of `styles/global.scss`:

```scss
label,
input,
textarea {
  display: block;
  width: 100%;
}

label {
  margin-bottom: 4px;
}

input,
textarea {
  padding: 4px;
  font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid black;
  border-radius: 4px;
}

button {
  background-color: #1a73e8;
  border: 1px solid #1a73e8;
  border-radius: 4px;
  padding: 8px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}
```

2. Add some event handler functions and a `<form>` with the `<input>`, `<textarea>`, and `<button>` elements we need to `CreatePage`:

```jsx
import { useState } from 'react';
import styles from '@styles/create.module.scss';

const CreatePage = () => {
  const [formValues, setFormValues] = useState({
    title: '',
    slug: '',
    coverImage: '',
    coverImageAlt: '',
    content: '',
  });

  /*
  This is the function we're passing to each control so we can capture
  the value in it and store it in our `formValues` variable.
  */
  const handleChange = (e) => {
    const id = e.target.id;
    const newValue = e.target.value;

    setFormValues({ ...formValues, [id]: newValue });
  };

  /*
  This function is passed to the <form> and specifies what happens when
  the form is submitted. For now, we're going to log our `formValues`
  to verify that they are being managed correctly.
  
  Side note: we do not need to set an `onClick` for the <button> at the
  end of the form because it has type="submit". This allows us to click
  to submit the form or press the Enter key to submit it.
  */
  const handleSubmit = (e) => {
    // This prevents the default functionality of submitting a form
    e.preventDefault();

    console.log(formValues);
  };

  return (
    <div className={styles.CreatePage}>
      <form onSubmit={handleSubmit}>
        <h1>Create a new post</h1>
        <div>
          <label htmlFor="title">Title</label>
          <input
            id="title"
            type="text"
            value={formValues.title}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="slug">Slug</label>
          <input
            id="slug"
            type="text"
            value={formValues.slug}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="coverImage">Cover Image URL</label>
          <input
            id="coverImage"
            type="text"
            value={formValues.coverImage}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="coverImageAlt">Cover Image Alt</label>
          <input
            id="coverImageAlt"
            type="text"
            value={formValues.coverImageAlt}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="content">Content</label>
          <textarea
            id="content"
            value={formValues.content}
            onChange={handleChange}
          />
        </div>
        <button type="submit">Create</button>
      </form>
    </div>
  );
};

export default CreatePage;
```

3. Enter some data into each of the controls. Here's a list of what I'm entering as an example:

- `title`: My Third Blog Post
- `slug`: my-third-blog-post
- `coverImage`: https://placekitten.com/g/700/300
- `coverImageAlt`: A random kitten from PlaceKitten.com.
- `content`: Check me out! I'm writing my third blog post on a site I created. I'm so proud of myself!

4. Click the "Create" button.
5. Check the dev tools console.
6. Your page and console should look like this:

[![Window showing the create page and inputs on the left and the dev tools console on the right. The console shows an expanded JSON object with the form values correctly stored.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-02%2FCleanShot%202021-01-10%20at%2014.52.21.png?alt=media&token=55cb793a-714e-4664-b67e-c2d8ddd3495a)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-02%2FCleanShot%202021-01-10%20at%2014.52.21.png?alt=media&token=55cb793a-714e-4664-b67e-c2d8ddd3495a)

7. Commit and push your work to your repository:

```
git add .
git commit -m "Adding form and controls to CreatePage"
git push
```

## Write a Firebase Create Function

Our `CreatePage` component captures all the data we need to create a post. Now, we need to do something with that data.

1. Add a `createPost` function to `lib/firebase.js`:

```js
/*
Creates a new post under /posts in the Realtime Database. Automatically
generates the `dateCreated` property from the current UTC time in milliseconds.
*/
export const createPost = async (post) => {
  initFirebase();

  const dateCreated = new Date().getTime();
  post.dateCreated = dateCreated;

  return firebase.database().ref(`/posts/${post.slug}`).set(post);
};
```

2. Update the `CreatePage` component for fully creating posts. The code after this list of changes shows what your component should look like after making the updates.

- Import `useRouter` from `next/router` after the `useState` import.
- Import `createPost` from `@lib/firebase` after the `useRouter` import.
- Instantiate the `router` at the top of the `CreatePage` function.
- Add an `isLoading` state after the `formValues` instantiation.
- Update `handleSubmit` to check for missing values, set the `isLoading` state, and call `createPost`.
- Update the submit `<button>` to use `isLoading`.

```jsx
import { useState } from 'react';
import { useRouter } from 'next/router'; // this is new
import { createPost } from '@lib/firebase'; // this is new
import styles from '@styles/create.module.scss';

const CreatePage = () => {
  const router = useRouter(); // this is new
  const [formValues, setFormValues] = useState({
    title: '',
    slug: '',
    coverImage: '',
    coverImageAlt: '',
    content: '',
  });
  const [isLoading, setIsLoading] = useState(false); // this is new

  /*
  This is the function we're passing to each control so we can capture
  the value in it and store it in our `formValues` variable.
  */
  const handleChange = (e) => {
    const id = e.target.id;
    const newValue = e.target.value;

    setFormValues({ ...formValues, [id]: newValue });
  };

  /*
  This function is passed to the <form> and specifies what happens when
  the form is submitted. For now, we're going to log our `formValues`
  to verify that they are being managed correctly.
  
  Side note: we do not need to set an `onClick` for the <button> at the
  end of the form because it has type="submit". This allows us to click
  to submit the form or press the Enter key to submit it.
  */
  const handleSubmit = (e) => {
    // This prevents the default functionality of submitting a form
    e.preventDefault();

    // Check if there are any missing values.
    let missingValues = [];
    Object.entries(formValues).forEach(([key, value]) => {
      if (!value) {
        missingValues.push(key);
      }
    });

    // Alert and prevent the post from being created if there are missing values.
    if (missingValues.length > 1) {
      alert(`You're missing these fields: ${missingValues.join(', ')}`);
      return;
    }

    // Update the isLoading state.
    setIsLoading(true);

    // Start the attempt to create a new post.
    createPost(formValues)
      .then(() => {
        // Update the isLoading state and navigate to the home page.
        setIsLoading(false);
        router.push('/');
      })
      .catch((err) => {
        // Alert the error and update the isLoading state.
        alert(err);
        setIsLoading(false);
      });
  };

  return (
    <div className={styles.CreatePage}>
      <form onSubmit={handleSubmit}>
        <h1>Create a new post</h1>
        <div>
          <label htmlFor="title">Title</label>
          <input
            id="title"
            type="text"
            value={formValues.title}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="slug">Slug</label>
          <input
            id="slug"
            type="text"
            value={formValues.slug}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="coverImage">Cover Image URL</label>
          <input
            id="coverImage"
            type="text"
            value={formValues.coverImage}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="coverImageAlt">Cover Image Alt</label>
          <input
            id="coverImageAlt"
            type="text"
            value={formValues.coverImageAlt}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="content">Content</label>
          <textarea
            id="content"
            value={formValues.content}
            onChange={handleChange}
          />
        </div>
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Creating...' : 'Create'}
        </button>
      </form>
    </div>
  );
};

export default CreatePage;
```

3. Fill out the form with data such as this:

- `title`: My Third Blog Post
- `slug`: my-third-blog-post
- `coverImage`: https://placekitten.com/g/700/300
- `coverImageAlt`: A random kitten from PlaceKitten.com.
- `content`: Check me out! I'm writing my third blog post on a site I created. I'm so proud of myself!

4. Click the "Create" button.
5. When it's finished loading, you should see the home page and your new post at the top of the list.

[![Window showing the home page and list of blog posts.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-02%2FCleanShot%202021-01-10%20at%2015.22.04.png?alt=media&token=b2c47ab7-43e9-42bd-9454-ed33f8a8d4e2)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-02%2FCleanShot%202021-01-10%20at%2015.22.04.png?alt=media&token=b2c47ab7-43e9-42bd-9454-ed33f8a8d4e2)

6. Commit and push your work to your repository:

```
git add .
git commit -m "Adding createPost function and using it in CreatePage"
git push
```

7. Celebrate!!! You did it!!! <span role="img" aria-label="party popper emoji">🎉</span>

Don't forget that [last time](/nextjs-firebase-blog-01), we [deployed our site to Vercel](/nextjs-firebase-blog-01#deploy-to-vercel). With every `git push` we've done, Vercel has re-built your site for you! It's already updated and you can share your progress with everyone you know. :)


Build a Blog Site with Next.js and Firebase Part 2 - Creating New Posts


Welcome to the third post in my new "Build a Blog Site with Next.js and Firebase" series! This series is pretty similar to a series I wrote in 2019: ["Build a React & Firebase Blog Site"](/series/react-firebase-blog). Because it's been well over a year since I published that series, I decided to create a new series and use the Next.js React framework this time. It's a fun framework to use, and I know so many people that are curious about it. I hope you enjoy the series!

- _[Read Part 1 of the series](/blog/nextjs-firebase-blog-01)_
- _[Read Part 2 of the series](/blog/nextjs-firebase-blog-02)_
- _[Read Part 4 of the series](/blog/nextjs-firebase-blog-04)_
- _[Read Part 5 of the series](/blog/nextjs-firebase-blog-05)_

---

## Create a Page Component for Each Post

In the site we've been building together, there currently isn't a way for people to read posts individually. We have the home page, which lists all blog posts, and we have a page for creating new posts. The good news is that we can handle rendering individual posts on their own pages pretty easily with [Next.js Dynamic Routes](https://nextjs.org/docs/routing/dynamic-routes). We just need to make sure we name the file correctly. Let's create a page component that just displays the `slug` from the URL as a test.

1. Add `post.module.scss` under the `styles` directory:

```scss
.PostPage {
  img {
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid black;
  }

  h1 {
    margin-top: 20px;
    margin-bottom: 8px;
  }

  a {
    display: block;
    padding: 8px;
    color: black;
  }
}
```

2. Add a `post` directory to `pages`
3. Add `[slug].js` under the `post` directory:

```jsx
import { useRouter } from 'next/router';
import styles from '@styles/post.module.scss';

const PostPage = () => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div className={styles.PostPage}>
      <h1>Hello, from post: {slug}!</h1>
    </div>
  );
};

export default PostPage;
```

4. Go to `https://localhost:3000/post/my-first-blog-post` in your browser
5. The page should look something like this:

[![White webpage with black text that reads "Hello, from post: my-first-blog-post!".](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2013.46.33.png?alt=media&token=5fe24bde-e502-4fe8-af7c-8675261f2729)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2013.46.33.png?alt=media&token=5fe24bde-e502-4fe8-af7c-8675261f2729)

6. Commit and push your work to your repository:

```
git add .
git commit -m "Adding basic PostPage component"
git push
```

## Link to Each Post on the Home Page

Now that we have the pages for each post dynamically generating, we can link to them on the home page.

1. In `pages/index.js`, add this `<a>` element below the `<p>` where you set `dangerouslySetInnerHTML` with the post content:

```jsx
<a href={`/post/${post.slug}`}>Continue Reading</a>
```

2. In `styles/index.module.scss`, add `margin-bottom: 16px;` to the `p` element.
3. Below that style, add one for the `a` that sets the `color` to `#1a73e8`.
4. The home page should now look something like this:

[![Web page listing blog posts. Each has a black and white image of a random cat, a title in bold text, a date, excerpt, and blue link that reads "Continue Reading".](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2014.01.54.png?alt=media&token=0acd5569-1da6-4e58-82da-48fb1f5ccb64)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2014.01.54.png?alt=media&token=0acd5569-1da6-4e58-82da-48fb1f5ccb64)

5. Commit and push your work to your repository:

```
git add .
git commit -m "Adding links to each post"
git push
```

## Load and Render Posts by Slug

Our `PostPage` component doesn't do much yet, so let's take care of that now. We'll need to add a function for getting a post's details from our Firebase Realtime Database and then update the `PostPage` component to render those details nicely.

1. Add a new `getPostBySlug` function to `lib/firebase.js` for getting the post from our Firebase Realtime Database:

```js
/*
Retrieves the data for a single post from a given slug.
*/
export const getPostBySlug = async (slug) => {
  initFirebase();

  return await firebase
    .database()
    .ref(`/posts/${slug}`)
    .once('value')
    .then((snapshot) => snapshot.val());
};
```

2. Import `getPostBySlug` at the top of `pages/post/[slug].js` (you can remove the `useRouter` import):

```jsx
import { getPostBySlug } from '@lib/firebase';
```

3. Right before `export default PostPage`, add `getServerSideProps` to `pages/post/[slug].js`.

```jsx
export async function getServerSideProps(context) {
  const post = await getPostBySlug(context.query.slug);

  return {
    props: {
      post,
    },
  };
}
```

4. Update the `PostPage` component to accept a `post` prop and render the post:

```jsx
const PostPage = ({ post }) => (
  <div className={styles.PostPage}>
    <img src={post.coverImage} alt={post.coverImageAlt} />
    <h1>{post.title}</h1>
    <span>Published {getFormattedDate(post.dateCreated)}</span>
    <p dangerouslySetInnerHTML={{ __html: post.content }}></p>
  </div>
);
```

5. `PostPage` uses the same `getFormattedDate` function as the home page, so let's add a `utils.js` file under the `lib` directory and export the function from there. You will have to restart you development server after this step if it's running.

```js
export const getFormattedDate = (milliseconds) => {
  const formatOptions = {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    year: 'numeric',
    timeZone: 'UTC',
  };
  const date = new Date(milliseconds);
  return date.toLocaleDateString(undefined, formatOptions);
};
```

6. Import `getFormattedDate` in both `pages/index.js` and `pages/post/[slug].js`:

```jsx
import { getFormattedDate } from '@lib/utils';
```

7. If you go to `http://localhost:3000/post/my-second-blog-post` in your browser, the page should look like this:

[![Webpage showing a black and white image of a random cat from PlaceKitten.com, the blog post title in bold font, the publish date, and the post content.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2014.27.44.png?alt=media&token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2014.27.44.png?alt=media&token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682)

8. Commit and push your work to your repository:

```
git add .
git commit -m "Rendering posts in PostPage"
git push
```

## Add Site Navigation and Semantic HTML

### Add a Layout component

We've got our post pages, but now we need a way to navigate back to the home page! We also want the navigation to look the same on each page, so let's make a component for it that'll also help us consolidate some page styles.

1. Add a `components` directory at the root of your project.
2. Update `jsconfig.json` for the new `components` directory:

```json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components": ["components"],
      "@lib/*": ["lib/*"],
      "@styles/*": ["styles/*"]
    }
  }
}
```

3. Add an `index.js` file for exporting all components from the directory.
4. Add a `Layout` directory under the `components` directory.
5. Add `Layout.jsx` to `components/Layout`:

```jsx
const Layout = ({ children }) => <div>{children}</div>;

export default Layout;
```

6. Update `components/index.js` to export Layout:

```jsx
export { default as Layout } from './Layout/Layout';
```

7. Import `Layout` into `pages/post/[slug].js`:

```jsx
import { Layout } from '@components';
```

8. Update `PostPage` so that the rendered contents are wrapped by the new `Layout` component:

```jsx
const PostPage = ({ post }) => (
  <Layout>
    <div className={styles.PostPage}>
      <img src={post.coverImage} alt={post.coverImageAlt} />
      <h1>{post.title}</h1>
      <span>Published {getFormattedDate(post.dateCreated)}</span>
      <p dangerouslySetInnerHTML={{ __html: post.content }}></p>
    </div>
  </Layout>
);
```

9. Restart your development server if it's running.
10. If you go to `http://localhost:3000/post/my-second-blog-post` in your browser, the page should still look like this:

[![Webpage showing a black and white image of a random cat from PlaceKitten.com, the blog post title in bold font, the publish date, and the post content.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2014.27.44.png?alt=media&token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2014.27.44.png?alt=media&token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682)

11. Commit and push your work to your repository:

```
git add .
git commit -m "Adding new Layout component"
git push
```

### Add HTML landmarks to Layout

1. Add `Layout.module.scss` to `components/Layout`:

```SCSS
.Layout {
  nav {
    padding: 24px;
    background-color: #1a73e8;

    span {
      a {
        font-size: 1.6rem;
        font-weight: bold;
        color: white;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  main {
    padding: 24px;
  }
}
```

2. Import the styles in `components/Layout/Layout.jsx`:

```jsx
import styles from './Layout.module.scss';
```

3. Add a `className` to the `<div>` in `Layout` and add two elements: `<nav>` and `<main>`.

```jsx
const Layout = ({ children }) => (
  <div className={styles.Layout}>
    <nav>
      <span>
        <a href="/">My Next.js Blog</a>
      </span>
    </nav>
    <main>{children}</main>
  </div>
);
```

4. Go to `https://localhost:3000/post/my-second-blog-post` in your browser.
5. It should look something like this and you should be able to go to the home page with the new link at the top:

[![The same webpage as before but with a blue bar at the top and a white link to the home page that reads "My Next.js Blog".](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2015.06.06.png?alt=media&token=dd59ce2b-4a3e-4ef0-a7c5-50b150548953)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-03%2FCleanShot%202021-01-17%20at%2015.06.06.png?alt=media&token=dd59ce2b-4a3e-4ef0-a7c5-50b150548953)

6. Commit and push your work to your repository:

```
git add .
git commit -m "Adding nav and link to home page to Layout"
git push
```

## Consolidate Page Styles

Take a look styles in `index.module.scss`, `create.module.scss`, and `post.module.scss`. You should notice that all three of them have the same `max-width`, `margin`, and `padding` CSS properties set and the same values for each. This will be one benefit of having a `Layout` component: It helps you consolidate your styles and avoid repetition.

It also allows you to make styling changes accross all of your pages at once. For example, if you wanted to make the main content of your site narrower, you could update `max-width` in this one place to do so. Let's remove these three properties from `index.module.scss`, `create.module.scss`, and `post.module.scss` and use the new `Layout` component on these pages.

1. Import `Layout` in `pages/index.js` and `pages/create.js`:

```jsx
import { Layout } from '@components';
```

2. Wrap the rendered content in `pages/index.js` and `pages/create.js` with the opening and closing `Layout` tags.
3. Delete the `max-width`, `margin`, and `padding` from `index.module.scss`, `create.module.scss`, and `post.module.scss`.
4. Update the `main` styles in `components/Layout/Layout.module.scss` to handle `max-width`, `margin`, and `padding` for page content:

```scss
main {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}
```

5. All of your pages should have the same blue naviation bar at the top now.
6. Commit and push your work to your repository:

```
git add .
git commit -m "Using Layout in all pages and consolidating styles"
git push
```

## One last thing

What if someone tries to go to a post that doesn't exist? Let's try it. Go to `https://localhost:3000/post/abcdefg` in your browser. You should see a Server Error error that says `"Cannot read property 'coverImage' of null"`. This is because the `PostPage` component is expecting its `post` prop to be defined. Since the post isn't found in the database, our `getPostBySlug` is returning `null`. So, the `post` object passed to `PostPage` is null and doesn't have any attributes we can access off of it.

1. Import `useRouter` again in the `PostPage` component and check to see if `post` is defined. Redirect to `/404` if the post doesn't exist.

```jsx
const PostPage = ({ post }) => {
  const router = useRouter();

  if (!post) {
    router.push('/404');
    return;
  }

  return (
    <Layout>
      <div className={styles.PostPage}>
        <img src={post.coverImage} alt={post.coverImageAlt} />
        <h1>{post.title}</h1>
        <span>Published {getFormattedDate(post.dateCreated)}</span>
        <p dangerouslySetInnerHTML={{ __html: post.content }}></p>
      </div>
    </Layout>
  );
};
```

Uh oh! There's another Server Error: "No router instance found. you should only use "next/router" inside the client side of your app." This is happening because this code is running on the server side of our app and the `router.push` method is not supported there. You can read more about it at the link mentioned in the error.

2. To fix it, let's add an additional check to our `if` statement:

```jsx
if (!post && typeof window !== 'undefined') {
  router.push('/404');
  return;
}
```

If we run this, we still get a Server Error: "Cannot read property 'coverImage' of null". The `if` statement we just added is mainly for the client-side and doesn't tell the server-side what to do if the `post` object is undefined.

3. Add one more `if` statement below the first one that just returns `null` if `post` isn't defined.

```jsx
const PostPage = ({ post }) => {
  const router = useRouter();

  if (!post) {
    router.push('/404');
    return;
  }

  if (!post) {
    return null;
  }

  return (
    <Layout>
      <div className={styles.PostPage}>
        <img src={post.coverImage} alt={post.coverImageAlt} />
        <h1>{post.title}</h1>
        <span>Published {getFormattedDate(post.dateCreated)}</span>
        <p dangerouslySetInnerHTML={{ __html: post.content }}></p>
      </div>
    </Layout>
  );
};
```

4. Check that you're redirected to a 404 page.
5. Commit and push your work to your repository:

```
git add .
git commit -m "Redirecting to 404 if post doesn't exist"
git push
```

6. Celebrate!!! You did it!!! <span role="img" aria-label="party popper emoji">🎉</span>


Build a Blog Site with Next.js and Firebase Part 3 - Reading Each Post


Welcome to the fourth post in my new "Build a Blog Site with Next.js and Firebase" series! This series is pretty similar to a series I wrote in 2019: ["Build a React & Firebase Blog Site"](/series/react-firebase-blog). Because it's been well over a year since I published that series, I decided to create a new series and use the Next.js React framework this time. It's a fun framework to use, and I know so many people that are curious about it. I hope you enjoy the series!

- _[Read Part 1 of the series](/blog/nextjs-firebase-blog-01)_
- _[Read Part 2 of the series](/blog/nextjs-firebase-blog-02)_
- _[Read Part 3 of the series](/blog/nextjs-firebase-blog-03)_
- _[Read Part 5 of the series](/blog/nextjs-firebase-blog-05)_

---

The importance of authentication in this app is making it so only _you_ can create, edit, and delete posts. It is _your_ blog after all. We'll use Firebase Authentication to manage a user account and we'll track the authentication state using React Context. Then we can hide certain parts of the app from people who aren't logged in.

## Set up Authentication in the Firebase Console

Firebase makes it easy for us to set up email/password authentication in our app. It's also easy to add a user for ourselves right from the console. Make sure you use a real email address and a secure password for your user. This is how you're protecting your blog! _There's a video after these steps that visually walks though how to do this._

1. Go to [the Firebase console](console.firebase.google.com) for your project.
2. Go to the "Authentication" page under "Build".
3. Click "Get Started".
4. You should be on the "Sign-in method" tab.
5. Click "Email/Password".
6. Enable the first toggle.
7. Click "Save".
8. Switch to the "Users" tab.
9. Click "Add user".
10. Enter a secure email and password.
11. Click "Add user".

<iframe title="Set up Email/Password Firebase Authentication" width="100%" height="350" src="https://www.youtube-nocookie.com/embed/WTnIU0ZtCoo" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

12. Go to your Realtime Database.
13. Click the "Rules" tab.
14. Update the rules to allow all reads but only authenticated writes:

```json
{
  "rules": {
    ".read": true,
    ".write": "auth != null"
  }
}
```

15. Click the "Publish" button.

## Manage Authentication State with React Context

1. Import `firebase/auth` into `lib/firebase.js` after the other Firebase imports:

```js
import 'firebase/auth';
```

2. Add an `onAuthStateChanged` function to `lib/firebase.js`:

```js
/*
Observes changes in authentication. Receives a callback function that is invoked
when auth state changes. See the Firebase Reference Docs for all of the details:
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onauthstatechanged
*/
export const onAuthStateChanged = async (callback) => {
  initFirebase();

  return firebase.auth().onAuthStateChanged((user) => callback(user));
};
```

3. Add a `contexts` directory at the root of the project.
4. Update `jsconfig.json` for the new `contexts` directory:

```json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components": ["components"],
      "@contexts/*": ["contexts/*"],
      "@lib/*": ["lib/*"],
      "@styles/*": ["styles/*"]
    }
  }
}
```

5. Add an `auth.js` file to `contexts`:

```js
import { createContext, useState, useEffect, useContext } from 'react';
import { onAuthStateChanged } from '@lib/firebase';

const AuthContext = createContext({ user: null, userLoading: true });

export const AuthProvider = ({ children }) => {
  const [userLoading, setUserLoading] = useState(true);
  const [user, setUser] = useState();

  useEffect(() => {
    return onAuthStateChanged((res) => {
      setUser(res);
      setUserLoading(false);
    });
  }, []);

  return (
    <AuthContext.Provider value={[user, userLoading]}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);
```

6. Update `pages/_app.js` to use `AuthProvider`:

```js
import { AuthProvider } from '@contexts/auth';
import '@styles/global.scss';

const App = ({ Component, pageProps }) => (
  <AuthProvider>
    <Component {...pageProps} />
  </AuthProvider>
);

export default App;
```

7. Restart your development server if it's running.
8. Make sure your home page loads without error.
9. Commit and push your work to your repository:

```
git add .
git commit -m "Adding AuthContext"
git push
```

## Check for an Authenticated User in CreatePage

1. Import `useAuth` in `pages/create.js`:

```jsx
import { useAuth } from '@contexts/auth';
```

2. Invoke it in the component after the `isLoading` variable and log the results.

```jsx
const [user, userLoading] = useAuth();
console.log(user, userLoading);
```

3. Visit `http://localhost:3000/create` in your browser.
4. You should see three logs in the console:

```
undefined true
null true
null false
```

The first shows the initial values of `user` and `userLoading` when we invoke `useAuth`. The second shows those values after the `callback` we pass into `onAuthStateChanged` has been invoked and `setUser` has been called. The third shows after `setUserLoading` has been called in the same `callback`. This is why we call `setUser` before `setUserLoading`, so we can ensure that everything is truly loaded before changing that state.

4. Redirect to 404 if no user and return null if user is loading, before the `handleChange` and `handleSubmit` functions are defined. This placement prevents us from unecessarily defining those two functions if we're not going to use them.

```jsx
if (userLoading) {
  return null;
}

if (!user && typeof window !== 'undefined') {
  router.push('/404');
  return null;
}
```

5. Visit `http://localhost:3000/create` in your browser.
6. You should be redirected to the 404 page.
7. Commit and push your work to your repository:

```
git add .
git commit -m "Requiring Authentication in CreatePage"
git push
```

## Add a Page for Signing In

1. Add a new `signIn` function to `lib/firebase.js`:

```js
/*
Attempts to authenticate a user with a given email and password.
*/
export const signIn = async (email, password) => {
  initFirebase();

  return firebase.auth().signInWithEmailAndPassword(email, password);
};
```

2. Add `styles/signin.module.scss`:

```scss
.SignIn {
  max-width: 500px;
  margin: 32px auto;
  padding: 32px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(black, 0.3);

  form {
    h1 {
      margin: 0;
      margin-bottom: 24px;
      text-align: center;
    }

    input {
      margin-bottom: 16px;
    }

    button {
      min-width: 120px;
      display: block;
      margin-top: 32px;
      margin-right: auto;
      margin-left: auto;
    }
  }
}
```

3. Add `pages/signin.js`:

```jsx
import { useState } from 'react';
import { useRouter } from 'next/router';
import { signIn } from '@lib/firebase';
import { useAuth } from '@contexts/auth';
import styles from '@styles/signin.module.scss';

const SignInPage = () => {
  const router = useRouter();
  const [user, userLoading] = useAuth();
  const [values, setValues] = useState({ email: '', password: '' });

  if (userLoading) {
    return <h1>Loading...</h1>;
  }

  if (user && typeof window !== 'undefined') {
    router.push('/');
    return null;
  }

  const handleChange = (e) => {
    const id = e.target.id;
    const newValue = e.target.value;

    setValues({ ...values, [id]: newValue });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    let missingValues = [];
    Object.entries(values).forEach(([key, value]) => {
      if (!value) {
        missingValues.push(key);
      }
    });

    if (missingValues.length > 1) {
      alert(`You're missing these fields: ${missingValues.join(', ')}`);
      return;
    }

    signIn(values.email, values.password).catch((err) => {
      alert(err);
    });
  };

  return (
    <div className={styles.SignIn}>
      <form onSubmit={handleSubmit}>
        <h1>Please Sign In</h1>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={values.email}
          onChange={handleChange}
        />
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={values.password}
          onChange={handleChange}
        />
        <button type="submit">Sign In</button>
      </form>
    </div>
  );
};

export default SignInPage;
```

4. Go to `http://localhost:3000/signin` in your browser.
5. Try logging in with the user credentials you created at the beginning of this post.
6. If successful, you should be sent to the home page.
7. Go to `http://localhost:3000/create` in your browser. You should not be redirected to the 404 page.
8. Commit and push your work to your repository:

```
git add .
git commit -m "Adding SignInPage"
git push
```

## Add a Sign Out Button to Layout

1. Add a new `signOut` function to `lib/firebase.js`:

```js
/*
Signs out the authenticated user.
*/
export const signOut = async () => {
  initFirebase();

  return firebase.auth().signOut();
};
```

2. Update the `Layout` component to check for a user and render a Sign Out button if there is one.

```jsx
import { signOut } from '@lib/firebase';
import { useAuth } from '@contexts/auth';
import styles from './Layout.module.scss';

const Layout = ({ children }) => {
  const [user] = useAuth();

  return (
    <div className={styles.Layout}>
      <nav>
        <span>
          <a href="/">My Next.js Blog</a>
        </span>
        {user && (
          <span>
            <button onClick={() => signOut()}>Sign Out</button>
          </span>
        )}
      </nav>
      <main>{children}</main>
    </div>
  );
};

export default Layout;
```

3. Update the `Layout` styles so the `<nav>` element uses Flexbox and the new button stands out from the blue bar.

```scss
.Layout {
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ...

    span {
      ...

      button {
        color: #1a73e8;
        background-color: white;
      }
    }
  }

  ...
}
```

4. Go to `http://localhost:3000/` in your browser.
5. In the blue bar at the top, you should see a white button with blue text that reads "Sign Out" like this:

[![View of the Sign Out button.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-04%2FCleanShot%202021-01-17%20at%2018.36.51.png?alt=media&token=9d34e42d-945c-4ad2-bc3a-9161cc34bc9b)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F01%2Fnextjs-firebase-blog-04%2FCleanShot%202021-01-17%20at%2018.36.51.png?alt=media&token=9d34e42d-945c-4ad2-bc3a-9161cc34bc9b)

6. Click the Sign Out button and check that you can no longer access the create page at `http://localhost:3000/create`.
7. Commit and push your work to your repository:

```
git add .
git commit -m "Adding Sign Out button to Layout"
git push
```

8. Celebrate!!! You did it!!! <span role="img" aria-label="party popper emoji">🎉</span>


Build a Blog Site with Next.js and Firebase Part 4 - Adding Authentication


Welcome to the fifth and final post in my new "Build a Blog Site with Next.js and Firebase" series! This series is pretty similar to a series I wrote in 2019: ["Build a React & Firebase Blog Site"](https://ashleemboyer.com/series/react-firebase-blog). Because it's been well over a year since I published that series, I decided to create a new series and use the Next.js React framework this time. It's a fun framework to use, and I know so many people that are curious about it. I hope you have enjoyed the series! As always, you can contact me through [Twitter](https://twitter.com/ashleemboyer) or [email](mailto:hello@ashleemboyer.com) if you run into any issues.

- _[Read Part 1 of the series](/blog/nextjs-firebase-blog-01)_
- _[Read Part 2 of the series](/blog/nextjs-firebase-blog-02)_
- _[Read Part 3 of the series](/blog/nextjs-firebase-blog-03)_
- _[Read Part 4 of the series](/blog/nextjs-firebase-blog-04)_

---

## Add a Page for Editing Posts

1. Add a new `updatePost` function to `lib/firebase.js`:

```js
/*
Updates the data for the given post in the database.
*/
export const updatePost = async (post) => {
  initFirebase();

  return firebase.database().ref(`/posts/${post.slug}`).set(post);
};
```

2. Add `edit.module.scss` to the `styles` directory:

```scss
.EditPage {
  form {
    h1 {
      margin-top: 0;
      margin-bottom: 24px;
    }

    input {
      margin-bottom: 16px;
    }

    textarea {
      height: 300px;
    }

    button {
      display: block;
      margin-right: 0;
      margin-left: auto;
      margin-top: 24px;
    }
  }
}
```

3. Add an `edit` directory to `pages`.
4. Add `[slug].js` to `pages/edit` directory:

```jsx
import { useState } from 'react';
import { useRouter } from 'next/router';
import { getPostBySlug, updatePost } from '@lib/firebase';
import { useAuth } from '@contexts/auth';
import { Layout } from '@components';
import styles from '@styles/edit.module.scss';

const EditPage = ({ post }) => {
  const router = useRouter();
  const [user, userLoading] = useAuth();
  const [values, setValues] = useState(post);
  const [isLoading, setIsLoading] = useState(false);

  if (userLoading) {
    return null;
  }

  if (!user && typeof window !== 'undefined') {
    router.push('/signin');
    return null;
  }

  const handleChange = (e) => {
    const id = e.target.id;
    const newValue = e.target.value;

    setValues({ ...values, [id]: newValue });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    let missingValues = [];
    Object.entries(values).forEach(([key, value]) => {
      if (!value) {
        missingValues.push(key);
      }
    });

    if (missingValues.length > 1) {
      alert(`You're missing these fields: ${missingValues.join(', ')}`);
      return;
    }

    setIsLoading(true);
    updatePost(values)
      .then(() => {
        setIsLoading(false);
        router.push(`/post/${post.slug}`);
      })
      .catch((err) => {
        alert(err);
        setIsLoading(false);
      });
  };

  return (
    <Layout>
      <div className={styles.EditPage}>
        <form onSubmit={handleSubmit}>
          <h1>Edit Post: {post.slug}</h1>
          <div>
            <label htmlFor="title">Title</label>
            <input
              id="title"
              type="text"
              value={values.title}
              onChange={handleChange}
            />
          </div>
          <div>
            <label htmlFor="coverImage">Cover Image URL</label>
            <input
              id="coverImage"
              type="text"
              value={values.coverImage}
              onChange={handleChange}
            />
          </div>
          <div>
            <label htmlFor="coverImageAlt">Cover Image Alt</label>
            <input
              id="coverImageAlt"
              type="text"
              value={values.coverImageAlt}
              onChange={handleChange}
            />
          </div>
          <div>
            <label htmlFor="content">Content</label>
            <textarea
              id="content"
              value={values.content}
              onChange={handleChange}
            />
          </div>
          <button type="submit" disabled={isLoading}>
            {isLoading ? 'Updating...' : 'Update'}
          </button>
        </form>
      </div>
    </Layout>
  );
};

export async function getServerSideProps(context) {
  const post = await getPostBySlug(context.query.slug);

  return {
    props: {
      post,
    },
  };
}

export default EditPage;
```

5. Go to `http://localhost:3000/edit/my-first-blog-post` in your browser. It should look a lot like the create page.
6. Change something about the post and click "Update".
7. You should be taken to the page for the post and should see your changes.
8. Commit and push your work to your repository:

```
git add .
git commit -m "Adding EditPage component"
git push
```

## Install FontAwesome

1. Install the `@fortawesome/fontawesome-svg-core`, `@fortawesome/free-solid-svg-icons`, and `@fortawesome/react-fontawesome` packages:

```bash
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
```

2. Load the icons in `pages/_app.js`:

```jsx
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas);
```

3. Commit and push your work to your repository:

```
git add .
git commit -m "Installing FontAwesome"
git push
```

## Add an Icon component

We're going to make a wrapper component for the `FontAwesomeIcon` to make it easy to render an icon at different sizes and so we don't have to remember the import path for the `FontAwesomeIcon` component. The `classnames` package is great conditionally applying classes based on boolean props passed to a component. You can read more about the package [here](https://github.com/JedWatson/classnames#readme).

1. Install the `classnames` package:

```
npm install classnames
```

2. Add `Icon` directory to the `components` directory.
3. Add `Icon.module.scss` to the `components/Icon` directory:

```scss
$icon-small: 1rem;
$icon-medium: 1.5rem;
$icon-large: 2rem;

.Icon {
  width: $icon-medium;
  height: $icon-medium;
  font-size: $icon-medium;

  &--small {
    width: $icon-small;
    height: $icon-small;
    font-size: $icon-small;
  }

  &--large {
    width: $icon-large;
    height: $icon-large;
    font-size: $icon-large;
  }
}
```

4. Add `Icon.jsx` to the `components/Icon` directory:

```jsx
import classNames from 'classnames/bind';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import styles from './Icon.module.scss';

const Icon = ({ name, small, large }) => {
  let cx = classNames.bind(styles);
  let className = cx('Icon', {
    'Icon--small': small,
    'Icon--large': large,
  });

  return <FontAwesomeIcon className={className} icon={name} />;
};

export default Icon;
```

5. Update `components/index.js` to export `Icon`:

```js
export { default as Icon } from './Icon/Icon';
```

6. Commit and push your work to your repository:

```
git add .
git commit -m "Adding Icon component"
git push
```

## Add a Link for EditPage

1. Import the new `Icon` component in `PostPage` (that's `pages/post/[slug.js]`):

```jsx
import { Icon, Layout } from '@components';
```

2. Also import `useAuth` in `PostPage`:

```jsx
import { useAuth } from '@contexts/auth';
```

3. Invoke `useAuth` after `useRouter` in `PostPage`:

```jsx
const [user] = useAuth();
```

4. Wrap the `<h1>` with the post's title in a `<div>` and also render an edit link in the `<div>` if there's an authenticated user:

```jsx
<div>
  <h1>{post.title}</h1>
  {user && (
    <a href={`/edit/${post.slug}`}>
      <Icon name="pencil-alt" />
    </a>
  )}
</div>
```

5. After the `<h1>` styles in `styles/post.module.scss`, add styles for the `<a>` element:

```scss
a {
  padding: 8px;
  color: black;
}
```

6. Go to `http://localhost:3000/post/my-first-blog-post` in your browser.
7. Click the new pencil icon.
8. You should be taken to the edit page for `my-first-blog-post`.
9. Commit and push your work to your repository:

```
git add .
git commit -m "Adding edit link"
git push
```

## Add a Delete Button

1. Add a new `deletePost` function in `lib/firebase.js`:

```js
/*
Deletes a post from the database.
*/
export const deletePost = async (slug) => {
  initFirebase();

  return firebase.database().ref(`/posts/${slug}`).set(null);
};
```

2. Import the `deletePost` function in `PostPage`:

```jsx
import { deletePost, getPostBySlug } from '@lib/firebase';
```

3. At the same level as the edit link we just added in the previous section, add a `<button>` and wrap both elements in a `div`:

```jsx
<span>
  <a href={`/edit/${post.slug}`}>
    <Icon name="pencil-alt" />
  </a>
  <button
    onClick={() => {
      const shouldDeletePost = confirm(
        'Are you sure you want to delete this post?',
      );
      if (shouldDeletePost) {
        deletePost(post.slug).then(() => {
          router.push('/');
        });
      }
    }}
  >
    <Icon name="trash-alt" />
  </button>
</span>
```

4. Replace the `a` styles you added to `styles/post.module.scss` with these:

```scss
& > div {
  display: flex;
  margin: 0;

  a {
    padding: 8px;
    color: black;
  }

  button {
    background: transparent;
    box-shadow: none;
    border: none;
    color: black;
  }
}
```

5. Create a new post for testing the delete functionality.
6. Go to the post's page and you should see a trashcan icon to the right of the pencil icon like this:

[![View of the trashcan and other icon.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fnextjs-firebase-blog-05%2FCleanShot%202021-01-17%20at%2019.54.16.png?alt=media&token=5371736e-21fe-41b4-b3a0-ed9b5ad6cde0)](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fnextjs-firebase-blog-05%2FCleanShot%202021-01-17%20at%2019.54.16.png?alt=media&token=5371736e-21fe-41b4-b3a0-ed9b5ad6cde0)

7. Click the trashcan icon and you should see an alert that says "Are you sure you want to delete this post?"
8. Click OK and you should be taken back to the home page. That post will no longer be listed and it should also be gone from the database.
9. Commit and push your work to your repository:

```
git add .
git commit -m "Adding delete button"
git push
```

0. Celebrate!!! You did it!!! <span role="img" aria-label="party popper emoji">🎉</span>


Posts in the "Build a Blog Site with Next.js and Firebase" Series