
The `aria-label` property can be extremely useful when used correctly. When used incorrectly, it can wreak havoc on speech-input user experiences. It's an easy mistake to make and luckily it's pretty easy to fix!

## What is the `aria-label` property?

As defined by the WAI ARIA 1.2 standards, [the `aria-label` property](https://www.w3.org/TR/wai-aria-1.2/#aria-label) "defines a string value that labels the current element". It has the same purpose as [the `aria-labelledby` property](https://www.w3.org/TR/wai-aria-1.2/#aria-labelledby), which references another element that labels the current element. The purpose of both of these properties is to provide an [Accessible Name](https://www.w3.org/TR/accname-1.1/#dfn-accessible-name) of the current element.

Related to these properties is the `aria-describedby` property, which references another element that describes the current element. The purpose of this property is to provide an [Accessible Description](https://www.w3.org/TR/accname-1.1/#dfn-accessible-description) for the current element. The Accessible Name should be short and concise, and the Accessible Description should be more verbose and complement the Accessible Name.

The Accessible Name is part of what screen readers use to announce elements to a user when they come into focus. A `<button>` with no `aria-label` and plain text between its opening and closing tags would have an Accessible Name that matches its plain text. That same `<button>` can have its Accessible Name overridden with something completely different using the `aria-label` property.

Use the next two example code snippets to compare how the same button sounds with and without an `aria-label`.

<CallOut id="example-1" title="Example 1: <button> with no aria-label" type="example">

The code:

```html
<button>OK</button>
```

The output:

<br />
<button>OK</button>

</CallOut>

<CallOut id="example-2" title="Example 2: <button> with an aria-label" type="example">

The code:

```html
<button aria-label="Confirm selection">OK</button>
```

The output:

<br />
<button aria-label="Confirm selection">OK</button>

</CallOut>

## Why does `aria-label` need to match the visible label?

First of all, an `aria-label` must match its element's visible label because there is a Level A WCAG Success Criterion that says so. [SC 2.5.3: Label in Name](https://www.w3.org/TR/WCAG21/#label-in-name) says:

> For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

This means that the Accessible Name computed for an element should contain the text of the element's visual label. One best practice for this is to have the Accessible Name start with the visual label's text. So if a link contains the text "Learn more" and the author of that link wants to include more information about the link's purpose in the `aria-label`, a good practice is to start the `aria-label` with "Learn more".

If you're like me and my ADHD brain, you might need a little more reasoning than "the rules say so" to motivate you to follow the rules. A lot of people don't like being told what to do, and that's fine!

So why do we need to follow Success Criterion 2.5.3? It partially has to do with speech-recognition technology. As it turns out, the Accessible Name for elements is how speech-input users can interact with elements in a web page.

Referencing our two previous examples:

- A speech-input user can activate the button from [Example 1](#example-1) by saying "Click OK". This is because the Accessible Name for that button is "OK".
- A speech-input user cannot activate the button in [Example 2](#example-2) in the same way. This is because the Accessible Name for that button is "Confirm selection". If a speech-input user wanted to activate this button, they would have to say "Click confirm selection".

For speech-input users that rely on visual labels to come up with voice commands, there no way for them to know before speaking a command if the Accessible Name of an element differs from its visual label. They will have to speak a command and find out if it does or does not work. If a command doesn't work, they may retry a couple of times. And if the command actually does not work at all because the Accessible Name doesn't match the visual label, their energy has been wasted and they're also stuck.

## What happens when `aria-label` doesn't match the visible label?

As I wrote this article, I started to learn about Voice Control on Mac. I wanted to see if I could find a real world example of speech-input navigation being broken due to mismatched visual labels and accessible names. I found a couple of examples right on the Twitter home page.

Unfortunately, more than half of the main navigation links have accessible names that don't match their visual labels. Even in the cases where a link's `aria-label` began with the text in the visual label, I was not successful in activating those links with speech-input. I made countless attempts.

- Home: The `aria-label` for this link is dynamic. If there are unread tweets in a user's feed, then the `aria-label` reads "Home (New unread Tweets)". The "Click Home" command only activates this link if there are no unread tweets.
- Explore: The `aria-label` for this link is "Search and explore". Saying "Click Explore" does not activate this link.
- Notifications: The `aria-label` for this link is dynamic. If a user has 2 notifications for example, the `aria-label` is "Notifications (2 unread notifications)". The "Click Notifications" command only activates this link if a user has 0 unread notifications.
- Messages: The `aria-label` for this link is dynamic. If a user has unread messages from one other user, for example, the `aria-label` is "Direct Messages (1 unread conversation)". If there are no unread messages, the `aria-label` is "Direct Messages". The "Click messages" command does not ever work.

Here's a quick demo of me trying to activate the "Messages" link that shows on the home page of Twitter:

<iframe
  title="Voice Control Demo - Twitter Messages link"
  width="100%"
  height="350"
  src="https://www.youtube-nocookie.com/embed/FBiKOt-ipO0"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

## Are there other users that benefit from `aria-label` matching the visible label?

This article primarily focuses on the sighted speech-input user's experience, but there are other users affected by this issue as well. Think of a sighted screen reader user that comes across the `<button>` element in [Example 2](#example-2). It is presented by their screen reader as "Confirm selection, button", but the text in the button says "OK".

This can be a very confusing and stressful experience for the user. How can they be certain the issue is with the website and not their own action? We're imposing an extra cognitive load on the user to process the mismatched audio and visual experiences. There is also extra cognitive load required to first memorize the behavior, and then recall it the next time they come across the element.

It's not necessary or kind to do this to users. It's energy-draining, and energy is an extremely limited resource for all kinds of people who rely on accessible interfaces.

## How do I fix mismatched `aria-label`s and visual labels?

Now that you know mismatching `aria-label` and visual labels is harmful for speech-input users, how do you go about preventing that harm? First, I'd recommend reading [Playing with state](https://sarahmhigley.com/writing/playing-with-state/) by Sarah Higley and [Be Careful with Dynamic Accessible Names](https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html) by Adrian Roselli.

Second, think about whether or not you need to provide an `aria-label` for the element that differs from its visual label. Some cases that come to mind:

- Are there duplicate visual labels?
  - Your markup can generally be improved by ensuring all visual labels are unique. This is beneficial for screen reader navigation.
  - The speech recognition technology probably has a way to help the user choose which element they want. With Voice Control on Mac, a number appears next to the elements with matching Accessible Names after the command is spoken. Then you're able to say the number of the element you want to activate.
- Is the content of the element plain text? Omit the `aria-label` property. The computed accessible name for the element will be its text content.
- Is the element a toggle button? Reference the [Playing with state](https://sarahmhigley.com/writing/playing-with-state/) article I mentioned and also check out the [Toggle Buttons](https://inclusive-components.design/toggle-button/) writeup from Inclusive Components. The `aria-pressed` property better suits your needs than a dynamic `aria-label`.

After you've spent time thinking thoroughly about your `aria-label`s and visual labels, make the updates and **test them with your users**. It's hard for us to know if something is usable if it doesn't intersect with our own needs. The only experiences we can truly be experts of are our own. Don't miss the step where you get your information from the source of truth: your users with expertise in their lived experiences.


Users suffer when the accessible name of an element doesn’t match its visual label.

Don’t Overwrite Visual Labels With `aria-label`

Despite being answered time and time again, the button vs. link question prevails.

Should I Use a Button or a Link?

If you've been working in web accessibility for a while, you know there are many foundational quick-wins that can go a long way. If you're new to web accessibility, hopefully this doesn't come as a surprise! There are definitely challenging aspects to web accessibility, but it's not all that way. And lucky for us, a lot of the quick-wins are also quick and easy to identify with some automated tools! [`pa11y-ci`](https://github.com/pa11y/pa11y-ci) is just one of those tools.

In this post, I'll show you how I set up a [GitHub Action](https://github.com/features/actions) that runs `pa11y-ci` as a pull request check. The check will run against a Vercel deploy preview, and then the results will be shared as a comment on the pull request for easy visibility.

If at any point you find yourself stuck or needing to troubleshoot, check out a GitHub repository I created that represents the end-result of this guide: https://github.com/ashleemboyer/pa11y-ci-test-app.

## Step 1 (optional): Create a Next.js App

If you don't already have a Next.js App to follow along with, I recommend creating one. There are multiple ways of doing this detailed on [the Next.js Getting Started page](https://nextjs.org/docs/getting-started). To keep things simple for this example, I'm using the Automatic Setup approach.

**To create the Next.js app:**

1. Open a terminal
2. Run `npx create-next-app@latest`
3. When prompted, name the app `pa11y-ci-test-app`
4. Change directory into the new folder: `cd pa11y-ci-test-app`
5. Briefly explore the code and learn your way around

Note: I will be using `npm` instead of `yarn` for the rest of this post. If your generated project uses `yarn`, and you would also like to to use `npm` instead:

1. Run `rm yarn.lock` to delete the file
2. Run `npm install` to create a `package-lock.json` file
3. Run `npm run build` so the `package-lock.json` file can be patched if needed
4. Run `npm install` one more time to download any missing dependencies
5. Run `git add .` to stage the changed files for a commit
6. Run `git commit -m "Using npm instead of yarn"` to commit the changes

## Step 2 (optional): Create and Connect a GitHub Repository

If you followed step 1 and created a new Next.js App, you should follow this step as well. You will need a GitHub Repository for your project in order to run the GitHub Action we're creating.

**To create the GitHub Repository:**

1. Go to [github.com/new](https://github.com/new)
2. If needed, log in to your account
3. Under "Owner", select your account
4. Under "Repository name", enter `pa11y-ci-test-app`
5. Select either "Public" or "Private"
6. Click the "Create repository" button
7. Leave this page open in your browser

**To connect the GitHub Repository to your project:**

1. In a terminal, go to your project folder
2. Run `git remote add origin git@github.com:<YOUR-USERNAME>/pa11y-ci-test-app.git` after replacing `<YOUR-USERNAME>` with the GitHub username you used to create the repository. (Read about [Working with Remotes](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes) and [Remote Branches](https://git-scm.com/book/en/v2/Git-Branching-Remote-Branches) if you're curious.)
3. Run `git push -u origin main` to push the code to the repository.
4. Verify these steps were successful by refreshing your new repository's page in your browser

## Step 3: Install and Configure `pa11y-ci`

It's always good to test new tools locally (on your machine) before testing them remotely in a place like a pull request. Testing remotely can be tedious and time consuming, and the results of the testing can also be more difficult to locate and read. And if you happen to be like me and have ADHD, all of that is a recipe for multiple distractions!

Before doing anything else, let's create a new git branch. That will be useful later when we need to create a pull request for our GitHub Action.

**To create a new `git` branch:**

1. In a terminal, go to your project folder
2. Run `git checkout -b add-pa11y-ci`

**To install `pa11y-ci`:**

1. In a terminal, go to your project folder
2. Run `npm install --save-dev pa11y-ci`
3. Open the `package.json` file in your project
4. Verify the `pa11y-ci` package is listed under `devDependencies`

**To configure `pa11y-ci` for local testing:**

1. In your project folder, create a file called `.pa11yci`
2. In the new file, paste the following JSON:

```json
{
  "urls": ["http://localhost:3000/"]
}
```

This configuration tells `pa11y-ci` exactly what `urls` in our app it needs to test.

## Step 4: Test `pa11y-ci` locally (on your machine)

Now that we have `pa11y-ci` installed and configured for local testing, we can get to testing!

1. In your project folder, open the `package.json` file
2. Under the `"scripts"` property, add a new entry: `"pa11y-ci": "pa11y-ci"`
3. Open two separate terminals to your project folder
4. In the first terminal, run `npm run dev` to start the app
5. In the second terminal, run `npm run pa11y-ci` to run the new script we added in step 2

After `pa11y-ci` has finished running, this is how the output should read:

```
> pa11y-ci-test-app@0.1.0 pa11y-ci
> pa11y-ci

Running Pa11y on 1 URLs:
 > http://localhost:3000/ - 1 errors

Errors in http://localhost:3000/:

 • The html element should have a lang or xml:lang attribute which describes the language of the document.

   (html)

   <html><head><meta name="viewport" con...</html>

✘ 0/1 URLs passed
```

Hooray! We have an error, but the good news is that means `pa11y-ci` is working! Now we can progress from local testing towards creating our GitHub Action.

## Step 5: Deploy to Vercel

Our current configuration for `pa11y-ci` only works for when we run our app locally with `npm run dev`. For remote testing, we want `pa11y-ci` to test against real builds and public-facing urls. In order to do that, we need to deploy our Next.js app. We'll use Vercel in this example.

**How to deploy to Vercel:**

1. Go to [vercel.com/new](https://vercel.com/new)
2. If needed, log in to your account
3. Under "Import Git Repository", select "Continue with GitHub"
4. Search for your new repo (mine is called `pa11y-ci-test-app`)
5. Click the Import button in-line with the repo name
6. Click the Deploy button (you should not need to change any configuration)

Once the deploy is complete, you can close this window.

## Step 6: Install and Configure `next-sitemap`

There's another way `pa11y-ci` can be used to test against urls, and that is with the `--sitemap` option. This option is nice when you have a `sitemap.xml` file on your site that updates every time a build occurs. It means you don't have to manually update the `.pa11yci` file's list of urls every time a new page is added. The tool we'll use for generating a `sitemap.xml` file is called [`next-sitemap`](https://www.npmjs.com/package/next-sitemap), which is the tool I use on my own website for `pa11y-ci` testing.

**To install `next-sitemap`:**

1. In a terminal, go to your project folder
2. Run `npm install next-sitemap`

**To configure `next-sitemap`:**

1. In your project folder, create a new file called `next-sitemap.config.js`
2. In the new file, paste the following JavaScript:

```javascript
module.exports = {
  siteUrl: process.env.VERCEL_URL
    ? `https://${process.env.VERCEL_URL}`
    : 'http://localhost:3000/',
};
```

This tells `next-sitemap` what the main url of your site is. If you use a different port number than `3000`, make sure to update the code above to match the port number you use.

## Step 7: Test `next-sitemap` locally (on your machine)

To make sure we have everything configured correctly, we're going to test `next-sitemap` locally just like we did with `pa11y-ci`.

1. In your project folder, open the `package.json` file
2. Under the `"scripts"` property, add a new entry: `"postbuild": "next-sitemap"`
3. In a terminal, go to your project folder
4. Run `npm run build`

The new `postbuild` script we added will run automatically after the `build` script has completed. You should see some new `sitemap` files in the `public` directory. We will add those to the `.gitignore` file in the next section.

You should also see something like this output in the terminal after the `build` script output:

```
> pa11y-ci-test-app@0.1.0 postbuild
> next-sitemap

✨ [next-sitemap] Loading next-sitemap config: file:///pa11y-ci-test-app/next-sitemap.config.js
✅ [next-sitemap] Generation completed
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ indexSitemaps │   1    │
│   sitemaps    │   1    │
└───────────────┴────────┘
-----------------------------------------------------
 SITEMAP INDICES
-----------------------------------------------------

   ○ http://localhost:3000/sitemap.xml


-----------------------------------------------------
 SITEMAPS
-----------------------------------------------------

   ○ http://localhost:3000/sitemap-0.xml
```

## Step 8: Prepare for and Create a New Pull Request

Hopefully you created a new git branch called `add-pa11y-ci` [in Step 3](#step-3-install-and-configure-pa11y-ci), but it's also okay if you didn't! Go ahead and create it now. We'll need a different branch off of the main one in order to create a pull request in our GitHub repository.

**To prepare for the pull request:**

1. Make sure there is a `/public/sitemap*` entry in the `.gitignore` file. We **do not** want to commit these files since they need to be generated by the Vercel build process.
2. Make sure you have all your new `pa11y-ci` and `next-sitemap` work committed. I'm committing everything at once with the message: `"Adding pa11y-ci and next-sitemap"`.
3. Run `git push --set-upstream origin add-pa11y-ci` to push your new branch up to the repository.

**To create the new pull request:**

1. Go to `github.com/<YOUR-USERNAME>/pa11y-ci-test-app/compare` after replacing `<YOUR-USERNAME>` with the GitHub username you used to create the repository
2. Change the `compare` branch to `add-pa11y-ci`
3. The page should update have at least these 5 changed files:
   - `.gitignore`
   - `.pa11yci`
   - `next-sitemap.config.js`
   - `package-lock.json`
   - `package.json`
4. Click the "Create pull request" button
5. You should see 2 text boxes: one for the name of the pull request and one for the description
6. Fill in the title and description however you need
7. Click "Create pull request"

**To verify everything is set up correctly:**

1. Wait for the `vercel` bot to comment on the new pull request
2. In the new comment, open the "Visit Preview" link in a new tab
3. You should see your app built and running
4. Go to the `/sitemap.xml` page in the same app
5. You should see an XML file with contents that look something like this:

```xml
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>YOUR-APP-URL/sitemap-0.xml</loc>
  </sitemap>
</sitemapindex>
```

## Step 9: Create the pa11y-ci GitHub Action

Now that we have a live website to have `pa11y-ci` test against, we can create the GitHub Action that runs `pa11y-ci`.

**To create the GitHub Action:**

1. In your project folder, create a new folder called `.github`
2. In the new `.github` folder, create another folder called `workflows`
3. In the new `workflows` folder, create a new file called `pa11y-ci.yml`
4. Paste the following content in your new file:

```yml
# Wait to run until after the Vercel deployment has finished
# https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#deployment_status
on: deployment_status

jobs:
  pa11y-ci:
    # Only run if the Vercel deployment was successful
    # https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#deployment_status
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest

    steps:
      # Checkout latest commit of repo
      # https://github.com/actions/checkout#checkout-v3
      - uses: actions/checkout@v3

      # Install project dependencies
      - run: npm install

      # Run pa11y-ci against the generated sitemap
      # https://github.com/pa11y/pa11y-ci#sitemaps
      - run: npm run pa11y-ci -- --sitemap ${{ github.event.deployment_status.target_url }}/sitemap.xml
```

Before committing and pushing this new file, make sure to delete the `.pa11yci` file. It's no longer needed.

**To verify the GitHub Action works:**

1. Commit and push the new `.github/workflows/pa11y-ci.yml` and the removed `.pa11yci` file
2. Go to your pull request in a browser
3. Towards the bottom of the page, wait until you see the `pa11y-ci` check finish
4. The check should fail
5. Click the "Details" link to inspect the failed check
6. You should see the same error that you saw when testing locally in [Step 4](#step-4-test-pa11y-ci-locally-on-your-machine)

## Step 10 (optional): Update the pa11y-ci GitHub Action to add a comment on pull requests

When I added this `pa11y-ci` GitHub Action to my own site's pull requests, I decided to make it also comment results on the pull request. There are a couple of reasons for this:

- Normally you have to click the "Details" link next to a failed pull request check. This takes you to another page and away from the pull request. For me, that means an opportunity to get easily distracted.
- The formatting of results in pull request checks can sometimes be difficult to read. Putting the results in a pull request comment gives an opportunity to re-format them in a more readable way.

So to update the GitHub Action to comment on pull requests, we'll need to tell the `pa11y-ci` command to output its results in a different way, and then we'll add a step to the GitHub Action that reads the output, formats it, and creates a comment.

1. Update the `pa11y-ci` `run` step in `.github/workflows/pa11y-ci.yml` to be:
   ```yml
   # Run pa11y-ci against the generated sitemap
   # https://github.com/pa11y/pa11y-ci#sitemaps
   - run: npm run pa11y-ci -- --json --sitemap ${{ github.event.deployment_status.target_url }}/sitemap.xml |& tee pa11y-output.txt
   ```
2. Add a new step at the end of the file like this:
   ```yml
   # Comment the formatted pa11y-ci results on the PR
   - uses: actions/github-script@v5
     env:
       BODY_PREFIX: ''
     with:
       script: |
         const script = require('./.github/workflows/scripts/pa11y-ci.js')
         await script({ context, core, github })
   ```
3. Add a new folder inside `.github/workflows` called `scripts`
4. Add a new file to `scripts` called `pa11y-ci.js`
5. In the new file, paste the following JavaScript:

   ````js
   const { promises: fs } = require('fs');

   module.exports = async ({ context, core, github }) => {
     // Find this PR & do nothing if this isn't a PR
     const { data } =
       await github.rest.repos.listPullRequestsAssociatedWithCommit({
         owner: context.repo.owner,
         repo: context.repo.repo,
         commit_sha: context.sha,
       });
     const prNumber = data[0] && data[0].number;
     if (!prNumber) {
       return;
     }

     // Read the pa11y output and build the comment body
     const pa11yOutput = await fs.readFile('./pa11y-output.txt', 'utf8');
     const lines = pa11yOutput.split('\n');
     const asJSON = JSON.parse(lines.find((line) => line.startsWith('{')));
     const { total, errors, results } = asJSON;

     let commentBody = `${process.env.BODY_PREFIX}\n<h2>:microscope: pa11y-ci results</h2>\n\n`;
     commentBody += `- Number of URLs tested: ${total}\n`;

     if (!errors) {
       commentBody += `- No errors were found! :tada:\n`;
     } else {
       commentBody += `- Number of errors found: ${errors}. :sob:\n`;

       let formattedOutput = '';
       Object.keys(results).forEach((urlKey) => {
         const errors = results[urlKey];
         if (errors.length < 1) {
           return;
         }

         formattedOutput += `- [${urlKey}](${urlKey}):\n\n`;
         errors.forEach((error) => {
           formattedOutput += '  ```\n';
           formattedOutput += `  ${error.message}\n\n`;
           formattedOutput += `  ${error.selector}\n\n`;
           formattedOutput += `  ${error.context}\n\n`;
           formattedOutput += `  ${error.code}\n`;
           formattedOutput += '  ```\n\n';
         });
       });

       commentBody += `<details><summary>See results :eyes:</summary>\n\n${formattedOutput}</details>`;
     }

     // Get the comments on this PR
     const { data: comments } = await github.rest.issues.listComments({
       owner: context.repo.owner,
       repo: context.repo.repo,
       issue_number: prNumber,
     });

     // Try to find an existing pa11y results comment
     const previousComment = comments.find((comment) =>
       comment.body.startsWith(process.env.BODY_PREFIX),
     );
     if (previousComment) {
       // Update the previous comment
       await github.rest.issues.updateComment({
         owner: context.repo.owner,
         repo: context.repo.repo,
         comment_id: previousComment.id,
         body: commentBody,
       });
     } else {
       // Create a new comment
       await github.rest.issues.createComment({
         owner: context.repo.owner,
         repo: context.repo.repo,
         issue_number: prNumber,
         body: commentBody,
       });
     }

     if (errors) {
       core.setFailed('Errors were found by pa11y-ci');
     }
   };
   ````

6. Commit and push the changes to `.github/workflows/pa11y-ci.yml` and the new `.github/workflows/scripts/pa11y-ci.js` file.

**To verify that everything is working as expected:**

1. Go to your pull request in your browser
2. Wait for the `pa11y-ci` check to finish
3. The check should fail just like it did before
4. Look for a comment by the `github-actions` bot that says "🔬 pa11y-ci results"
5. The comment should say that 1 error was found
6. Expand the "See results 👀" text
7. There should be one error listed that matches the same error you've been seeing

## Step 11. Celebrate! 🎉

Nicely done! You've added a `pa11y-ci` GitHub Action that runs on pull requests. You should be proud. Give yourself a pat on the back. 😊

Use pa11y-ci to test deploy previews before merging pull requests.

How I Added a pa11y-ci GitHub Action to My Next.js Site


Many sites on the web have the same content at the top of every page. The content is commonly a logo that links to the home page and then several links to the main pages of the site. If you navigate the same site regularly, you probably find these navigation links repetitive because you learn to know what's already there. Even when you follow a link to a site you've never been to before, you probably expect there to be a set of navigation links at the top. If you're just trying to read the content of the page and don't care about the header, you'll find Skip Navigation links useful.

## What are Skip Navigation Links?

Skip Navigation Link are pretty straightforward. They enable people to skip the navigation at the beginning of a site and get to the main content of the page. This is really helpful for people who navigate sites without a pointer device, such as a keyboard. Without a Skip Navigation Link, a keyboard user would have to tab through every link, button, etc. that appears before the main page content. While tabbing might not be a difficult task for you personally, it is often more difficult for disabled users, so it's necessary to prevent that difficulty.

## Are there any guidelines for Skip Navigation Links?

Skip Navigation Links fall under [Web Content Accessibility Guideline 2.4: Provide ways to help users navigate, find content and determine where they are](https://www.w3.org/WAI/GL/WCAG20/WD-UNDERSTANDING-WCAG20-20081105/navigation-mechanisms.html). The first Success Criterion for this guideline is called [Success Criterion 2.4.1: Bypass Blocks](https://www.w3.org/WAI/GL/WCAG20/WD-UNDERSTANDING-WCAG20-20081105/navigation-mechanisms-skip.html), and within that is [Technique G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G1). The writeup for Technique G1 lists the following as [requirements for Skip Navigation Links](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G1#G1-procedure) that go to the main content of a page:

1. Check that a link is the first focusable control on the Web page.
2. Check that the description of the link communicates that it links to the main content.
3. Check that the link is either always visible or visible when it has keyboard focus.
4. Check that activating the link moves the focus to the main content.
5. Check that after activating the link, the keyboard focus has moved to the main content.

## What does the code look like?

I just used a little CSS and JSX for my Skip Navigation Link, and I opted for making it visible only when it gets keyboard focus. On my site, I use [Next.js Per-Page Layouts](https://nextjs.org/docs/basic-features/layouts#per-page-layouts) to help me render repeated content, such as navigation links, on many pages. The layout I use for the navigation header is where I placed a Skip Navigation Link. The code looks something like this:

```tsx
import styles from './base-layout.module.css';

const BaseLayout = ({ children }) => {
  return (
    <div className={styles.baseLayoutContainer}>
      <a className={styles.skipNavigationLink} href="#main-content">
        Skip Navigation
      </a>
      <SiteHeader />
      <main id="main-content" className={styles.mainElement} tabIndex={-1}>
        {children}
      </main>
      <SiteFooter />
    </div>
  );
};
```

What's important to note from this code:

1. The Skip Navigation Link is before the `SiteHeader` component that I built for rendering navigation links on my site. Remember: the link must be the first focusable control on the page.
2. The Skip Navigation Link's `href` property references the `id` of the `main` element where I render the content of a page.
3. The `main` element that I'm linking to with the Skip Navigation Link has `tabIndex` set to `-1`. This makes the element focusable but does not include it in the page's tab order. Further reading from TPGi: [Using the tabindex attribute](https://www.tpgi.com/using-the-tabindex-attribute/).

After I figured out the markup, I applied CSS to hide the Skip Navigation Link when not focused and also some CSS to remove the focus outline from the `main` element. The code looks something like this:

```css
.baseLayoutContainer {
  position: relative;
}

.skipNavigationLink {
  left: -10000px;
  position: absolute;
  z-index: 1;

  &:focus {
    left: 0;
  }
}

.mainElement:focus {
  outline: none;
}
```

What's important to note from this code:

1. The parent container of the Skip Navigation Link, specified by the `baseLayoutContainer` class name, has `position: relative` set. This is important because `position: absolute` is set on the Skip Navigation Link.
2. The Skip Navigation Link has `position: absolute`, `left: -10000px`, and `z-index: 1` set. This set of properties places the link off the left side of the page by 10,000 pixels and ensures it's placed on top of other elements using `z-index`. You may have to tweak this value if you have used it in other places in your app.
3. When the Skip Navigation Link is focused, the `left` position is updated to `24px`, moving it to be in view in the page.
4. When the `main` element (specified by the `mainElement` class name) is focused, `outline` is set to `none` so that no focus outline shows on the element after navigating to it with the Skip Navigation Link.

## Conclusion and Further Reading

And that's all! Skip Navigation Links are a super quick accessibility win with a ton of value since they help so many folks. Celebrate your quick win and keep the momentum going! [Consider adding a scroll-to-top link next if you haven't already](/blog/accessible-smooth-scroll-to-top-buttons-with-little-code).

### Further reading

- [Add a "Skip Navigation" Link to Help Keyboard Users Reach Main Content Faster](https://dequeuniversity.com/tips/add-skip-navigation-link)
- [Technique G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G123.html)
- [Technique G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G124.html)


Adding a "Skip Navigation" link is as easy as adding a few lines of code.

How I Added a Skip Navigation Link to My Next.js Site


If you've seen "a11y" floating around the web development space and you're not sure what it means or how to say it, you're absolutely not alone. Don't feel bad! Almost no one knows what it is until someone else tells them. I didn't know for a long time. I even created a tool that relies on the mispronunciation of it!

## What is a11y?

"A11y" is a numeronym or number-based word. It is composed of three parts:

- `"a"` - the first letter of the word "accessibility"
- `"11"` - the number of letters between the first and last letters of the word "accessibility"
- `"y"` - the last letter of the word "accessibility"

Numeronyms are very common in web development! Think of "K8s" (Kubernetes), "i18n" (internationalization), and "o11y" (observability) as a few of examples. Some of them have different pronunciations depending on how the number in the middle is pronounced in combination with the letters before and after it.

The way we pronounce "K8s" is different than the way we pronounce "a11y" because of how the numbers flow with the other letters. We _could_ pronounce "K8s" as "kay-eight-ess", but "keights" (see the word eight in the middle?) is a single syllable and a little easier to say.

## How is a11y pronounced?

So how do we pronounce "a11y"? We say "ay-eleven-why". Pronunciations like "al-ee" or "al-eye" don't quite fit like most other pronunciations of numeronyms because they're not saying the number in the middle at all. This isn't to say that all numeronyms are said the same way, but most that use this format follow this idea.

## Why use a11y instead of accessibility?

Numeronyms are often used when their original word is a lot of characters or difficult to pronounce. [According to Wikipedia](https://en.wikipedia.org/wiki/Numeronym), the first numeronym was created in the 1980s for a software account owner's surname because it was too long for the system to handle. "Accessibility" is 6 syllables whereas its numeronym is 1 less. That's not a huge amount of savings, but the phonetics of "a11y" are easier for many people to verbalize than "accessibility" because the there are less "harsh" syllables in comparison.

Numeronyms are also helpful where brevity is important, such as in tweets because Twitter enforces a character maximum. Since there are less characters to type, it can also be more efficient once you get used to using it. For me personally, it's also easier to remember how to spell!

## Do I have to a11y instead of accessibility?

Nope! If you like using the word "accessibility" more than you like using the "a11y" numeronym, please continue to do so. It's definitely a matter of preference and using one or the other does not make you more or less knowledgeable. If someone tells you otherwise, they are unfairly gatekeeping the topic of web accessibility. What truly matters is that you know what "a11y" means so you're not thrown off when you read it in other people's content.

Remember: everyone has different accessibility needs. Some people use "a11y" because it's more accessible to them. If "accessibility" is more accessible to you, that's totally acceptable!


The "a11y" numeronym, why it's important, and how to pronounce it

What the heck is "web a11y"?


I recently came across [a tweet from Sara Soueidan](https://twitter.com/SaraSoueidan/status/1390598514774847496) applauding folks who provide an RSS feed on their site. Sara is someone I highly admire in frontend web development and accessibility, but I had so little knowledge of RSS feeds and so many questions:

- What the heck are they?
- What are they for?
- I thought people didn't use them anymore?

If you also have questions like this, I recommend reading [How Do RSS Feeds Work?](https://rss.com/blog/how-do-rss-feeds-work/) right from RSS.com. The first few words really sum it up:

> Imagine being able to log into one dashboard and getting the latest news and events from all of your favorite websites, blogs, or podcasts? With RSS feeds, it’s possible!

To better understand how RSS feeds are consumed, I created my own RSS reader app and I also [wrote about it](https://ashleemboyer.com/create-your-own-nextjs-rss-reader-app) so you can create one too if you like. The app I created also served as a great way for me to test my RSS feed as I built it!

## How I Added an RSS Feed to my Next.js Site

There were two main problems I ran into while trying to build an RSS feed for my articles. Firstly, I didn't know that neither the `<description>` nor `content` of each `<item>` in the channel can't have regular HTML in it. [The HTML tags must be encoded](https://cyber.harvard.edu/rss/encodingDescriptions.html). Secondly, I found out it's really difficult to try to parse the HTML content in a Node.js environment on my own before putting it into the feed.

After struggling for hours and trying several different approaches, I [went to Twitter for help](https://twitter.com/AshleeMBoyer/status/1391568723581054978). There were a lot of helpful replies! I found exactly what I ended up using thanks to [an example project](https://github.com/sweeneyapps/html2rssfeed) from [@vphreak](https://twitter.com/vphreak/status/1391853784666501121). So, what did it take?

First, I installed [the `feed` package](https://github.com/jpmonette/feed).

```bash
yarn add feed
```

Then, I added a `generateRSSFeed` function.

```js
const generateRSSFeed = (articles) => {
  const baseUrl = 'https://ashleemboyer.com';
  const author = {
    name: 'Ashlee Boyer',
    email: 'hello@ashleemboyer.com',
    link: 'https://twitter.com/ashleemboyer',
  };

  // Construct a new Feed object
  const feed = new Feed({
    title: 'Articles by Ashlee M Boyer',
    description:
      "You can find me talking about issues surrounding Disability, Accessibility, and Mental Health on Twitter, or you can find me regularly live-knitting or live-coding on Twitch. I'm @AshleeMBoyer on all the platforms I use.",
    id: baseUrl,
    link: baseUrl,
    language: 'en',
    feedLinks: {
      rss2: `${baseUrl}/rss.xml`,
    },
    author,
  });

  // Add each article to the feed
  articles.forEach((post) => {
    const {
      content,
      fileName,
      meta: { date, description, title },
    } = post;
    const url = `${baseUrl}/${fileName}`;

    feed.addItem({
      title,
      id: url,
      link: url,
      description,
      content,
      author: [author],
      date: new Date(date),
    });
  });

  // Write the RSS output to a public file, making it
  // accessible at ashleemboyer.com/rss.xml
  fs.writeFileSync('public/rss.xml', feed.rss2());
};
```

Finally, I updated the `getStaticProps` function exported from `src/pages/index.jsx` to call the new `generateRSSFeed` function.

```js
export async function getStaticProps() {
  const articles = getAllArticles();
  articles.sort((a, b) => (a.meta.date < b.meta.date ? 1 : -1)

  generateRSSFeed(articles);

  return { props: { articles } };
}
```

Because my site is set up to build only when my main git branch is updated, `getStaticProps` will be called at that time and so will `generateRSSFeed`. This means the feed is always up to date when I push a new Markdown file for each post or whenever existing files are updated.

## Resources

- [RSS 2.0 Specification](https://validator.w3.org/feed/docs/rss2.html)
- [`feed` GitHub repository](https://github.com/jpmonette/feed#readme)
- [W3Schools XML RSS page](https://www.w3schools.com/xml/xml_rss.asp)


Learn how to add an RSS feed to your own Next.js site.

How I Added an RSS Feed to My Next.js Site


I recently came across [a tweet from Sara Soueidan](https://twitter.com/SaraSoueidan/status/1390598514774847496) applauding folks who provide an RSS feed on their site. Sara is someone I highly admire in frontend web development and accessibility, but I had so little knowledge of RSS feeds and so many questions:

- What the heck are they?
- What are they for?
- I thought people didn't use them anymore?

If you also have questions like this, I recommend reading [How Do RSS Feeds Work?](https://rss.com/blog/how-do-rss-feeds-work/) right from RSS.com. The first few words really sum it up:

> Imagine being able to log into one dashboard and getting the latest news and events from all of your favorite websites, blogs, or podcasts? With RSS feeds, it’s possible!

RSS feeds mean I can read all of my favorite blogs in one place?? And I don't _have_ to subscribe to newsletters to know when a new post has been published?? That sounds so lovely! I knew then that I definitely needed to figure out how to provide an RSS feed for my own site.

In order to better understand how to create an RSS feed for my site, I needed to better understand how they are used. This is where I got the idea to create my own RSS reader app! Once I had the app finished, it also doubled as a way for me to test my RSS feed as I developed it.

I had a ton of fun with it so I decided to share my findings with y'all in case you also want to make your own RSS reader app. I hope you find the instructions below helpful and as always, let me know on Twitter if you have any questions!

## How to Create Your Own Next.js RSS Reader App

### Fork and clone the repo

First, you need to create a fork of the starter code.

1. Go to [the GitHub repository](https://github.com/ashleemboyer/nextjs-rss-reader-starter)
2. Click the "Fork" button at the top right of the page
3. Follow the steps provided by GitHub

Second, clone the fork you've created onto your machine and install the dependencies.

```bash
git clone <your fork>    # Clones the fork
yarn                     # Installs the dependencies
```

### Set up Firebase Authentication

Third, you need to create a Firebase project since it'll handle authentication. You want this app to have authentication so that other people aren't driving up your API requests that will be made to RSS to JSON (we'll set that up next).

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-rss-reader`.
4. Toggle "Enable Google Analytics for this project" to off.
5. Click "Create project".
6. Click "Continue" when your new project is ready.

Here's a video showing these steps (the project name is different):

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

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

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

Here's a video showing these steps:

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

### Create an RSS to JSON account

Next, let's set up an RSS to JSON account so we can get an API key for making API requests. I personally have a paid plan because of the number of feeds I subscribe to, but the free plan is pretty nice! At the time of this writing, the free plan updates a feed once an hour, allows 10,000 requests per day, and supports 25 feeds. The starter code is currently set up to generate your site no more than once per day, so at the very most, you'll be making 1 request per feed per day.

1. Sign up for an RSS to JSON account at [this link](https://rss2json.com/sign-up)
2. Get your API key from [the My Account page](https://rss2json.com/me/api_key) and have it ready for the next step.

### Create a .env file

In the root of your forked project, create a file called `.env`. It will have four items in it.

```env
RSS_2_JSON_API_KEY=<your RSS to JSON api key>
NEXT_PUBLIC_FIREBASE_API_KEY=<your Firebase project's API key>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your Firebase project's auth domain>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your Firebase project ID>
```

Put your RSS to JSON API key from the previous step with the `RSS_2_JSON_API_KEY` item. You can get the other items from Firebase after registering your app. Here are the steps for that:

1. Go to [the Firebase console](https://console.firebase.google.com/) for your project
2. Go to the project settings
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-rss-reader`
6. Click the "Register app" button
7. Copy and paste the `apiKey`, `authDomain`, and `projectId` values with the last three items in your `.env` file

### Start the app

We're ready to go! Start the app with `yarn dev` and go to http://localhost:3000/ in your browser. You should be redirected to the login page where you can enter your email and password for the user you created in the second part of the Set up Firebase Authentication section above.

![Browser window screenshot with a background of large, dark green leaves. The window shows a white webpage showing "Log In" text at the top. There is an input for email and password and a gray "Sign In" button.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F05%2Fcreate-your-own-nextjs-rss-reader-app%2Flogin-page.png?alt=media&token=0ec4c0d0-6939-4858-a76d-31bd7d2f5010)

After logging in, you should see a list of articles. You can click the "Read here" links to read the article within your app, or you can click the "Read at source" link to read the original version of the article!

![Browser window screenshot with a background of large, dark green leaves. The window shows a white webpage with black text. The title is "My RSS Reader" and there is a vertical list of articles with thin black borders. Each article first shows the title in large bold text, then the name of the feed, author, and publish date on the next line, then a horizontal rule, and lastly the article's description as HTML.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F05%2Fcreate-your-own-nextjs-rss-reader-app%2Farticles-page.png?alt=media&token=81e422b0-addc-47fe-ae3d-539477222d39)

### Customize your feed

The app knows what feeds to fetch by the `feed.txt` file in the root of the project. If you open the file, you'll see three listed with each one on its own line in the file:

```txt
https://www.a11yproject.com/feed/feed.xml
https://webaim.org/blog/feed/
http://www.webaxe.org/feed/
```

If you want to remove a feed, just delete the line. If you want to add a feed, make sure it's on its own line. That's it! Happy reading. :)


Learn how to build your own RSS Reader App with Firebase Authentication and the RSS to JSON API.

How to Create Your Own Next.js RSS Reader App


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>


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 5 - Editing & Deleting Posts


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


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


It's been awhile since I've set up a React app for testing with Jest and Enzyme. Since I had to look up more than one of these steps to remind myself how to accomplish this, I decided to write a super quick guide in case it helps anyone else.

## Dec. 8th Correction

Enzyme is not yet compatible with React 17. You should make sure the highest version of React you are using is `16.14.0` if you want to use Enzyme with your tests. [This PR](https://github.com/enzymejs/enzyme/pull/2430) will add an adapter for React 17. _Please do not ask them when it will be done, it will be done when they get it done!_

## Step 1: Create the app with `create-react-app`

This requires having `npx` installed. You can read about it [here](https://www.npmjs.com/package/npx).

```bash
npx create-react-app <app-name>
```

## Step 2: If you use Sass modules, like me, install `node-sass`

At the time of this writing, `node-sass@5.0.0` in incompatible and `node-sass@4.14.1` must be installed instead. There's a Stack Overflow answer about it [here](https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0/64626556#64626556).

```bash
yarn add node-sass@4.14.1
```

## Step 3. Install the dev dependencies for Enzyme

The `--dev` option is what saves these under `devDependencies` in your `package.json` file. Why do they need to be under `devDependencies`? Because these kinds of dependences are "Packages that are only needed for local development and testing." You can read a little more on that [here](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file).

```bash
yarn add --dev enzyme enzyme-adapter-react-16
```

## Step 4. Configure Enzyme with an adapter in `setupTests.js`

Enzyme needs to know what adapter you want to use. We tell it in the `setupTests.js` file in the `src` directory of your project. You can get more details about setting up Enzyme [here](https://enzymejs.github.io/enzyme/).

Your `setupTests.js` should only have some comments and one `import` statement right now. Just add these lines right after that `import`:

```jsx
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });
```

## Step 5. Get to testing! 💪

Everything you need is installed and now you just need to write up some tests. Here are some Jest and Enzyme docs to help you get started:

- [Jest "Getting Started" Guide](https://jestjs.io/docs/en/getting-started)
- [Jest "Testing React Apps" Guide](https://jestjs.io/docs/en/tutorial-react)
- [Enzyme's "Using enzyme with Jest" Guide](https://enzymejs.github.io/enzyme/docs/guides/jest.html)
- [Enzyme API Reference](https://enzymejs.github.io/enzyme/docs/api/)


Learn how to set up and configure a React app for Jest and Enzyme testing in just a few steps.

Set up a React App for Testing with Jest and Enzyme


Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They're even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.

One example is the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1), which is 140,923 pixels tall at the time of this writing. I'm not calling them out, it's just one of my favorite pages on the entire internet! [It's a great resource for making accessible custom components](https://ashleemboyer.com/my-favorite-resource-for-making-accessible-custom-components).

Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think. It's definitely a lot easier than _I_ thought! The code bits I'm about to show are for React and SCSS, but you don't need to know either. The basic concepts here are for JavaScript and CSS. We'll also cover how to get rid of the smooth scrolling when it's an accessibility concern.The best part of this approach? It requires no focus management! <span aria-hidden>🎉</span>

## Prerequisites

If you don't already have one, you need to add a Skip Navigation Link to your site. It's a quick, easy win as well, and the instructions below reference the one I use on my site. Not sure how to do it? Then read my post on [How I Added a Skip Navigation Link to My Next.js Site](/blog/how-i-added-a-skip-navigation-link-to-my-next-js-site)!

## The React Code

As you may have read in [my post about Skip Navigation Links](/blog/how-i-added-a-skip-navigation-link-to-my-next-js-site#what-does-the-code-look-like), I use [Next.js Per-Page Layouts](https://nextjs.org/docs/basic-features/layouts#per-page-layouts) to help me render repeated content, such as navigation links, on many pages. The layout I use for the navigation header is where I placed a Skip Navigation Link and Scroll-to-Top link. The code looks something like this:

```tsx
import styles from './base-layout.module.css';

const BaseLayout = ({ children }) => {
  return (
    <div>
      <a href="#main-content" id="skip-navigation-link">
        Skip Navigation
      </a>
      <SiteHeader />
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
      <a href="#skip-navigation-link">Back to Top</a>
      <SiteFooter />
    </div>
  );
};
```

What's important from this code:

1. The Scroll-to-Top link goes to the first focusable control on the page, which should be a Skip Navigation Link.
2. The `href` of the Scroll-top-Top link matches the `id` of the Skip Navigation Link.

## The SCSS Code

The code below takes an accessibility- and browser-support- first approach. Rather than making the default behavior for scrolling be smooth, an animation which can be physically harmful to some folks (including myself), it only applies smooth scrolling when two conditions are true:

1. The `prefers-reduced-motion` query is supported ([see the CanIUse.com page](https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-motion))
2. The value of the setting is `no-preference` (which unfortunately is the default value)

```scss
html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}
```

One thing to keep in mind is that [`scroll-behavior` does not have full browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#browser_compatibility). At the time of writing, the feature is still in development for Safari.

## Conclusion

That's it! It really is just a few lines of code. After you add this, everyone will be able to quickly scroll to the top of your website. You've also made it so your site doesn't accidentally harm someone who can't tolerate animations! Well done. I am proud of you!


Adding a scroll-to-top button with smooth scrolling is as easy as adding a few lines of code.

Accessible, Smooth Scroll-to-top Buttons with Little Code


Accessibility can be pretty overwhelming at first. There are a lot of things to consider and it's really hard to figure out what you don't know when you're just starting out. I hope you find this short list useful to help your first dive into making accessible digital content. My focus is usually on websites, but a lot of this is good for things like mobile apps, ebooks, and slideshows, too!

## 1. Color Contrast

Ensuring you have a good contrast between text color and background color ensures nearly everyone can consume your content. People with vision disabilities (vision loss or color blindness) need high contrasting colors. Your minimum goal here is to meet contrast standards for normal and large sized text.

My favorite tool for this is the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/). You can input your foreground and background text colors and it will tell you how they fare under the WCAG level AA and level AAA standards.

![A screenshot of the WebAIM Contrast Checker in action. It shows the overall contrast ratio of two colors to the right of two inputs, and below that it shows whether the contrast passes level AA and AAA standards for both normal and large sized texts.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/headers%2F2020%2F07%2F26-three-thigns%2FScreen%20Shot%202020-07-26%20at%209.53.28%20PM.png?alt=media&token=aa6423ce-f0b1-4b2d-b43d-bb23765d0c40)

## 2. Alternative Text

Alternative text is also important for people with vision disabilities. There are two ways you can go about alternative text depending on your platform.

When you're making a website by writing your own HTML, writing blog posts, or posting to social media sites like Twitter, you can add alt text to images. In HTML, make sure you're providing an `alt` attribute all `img` elements. When writing blog posts, a lot of blogging platforms will have a text input for you to provide alternative text. On Twitter, you can add alternative text as you're about to tweet an image or GIF.

The previous points are only going to be useful for people using a screen reader. These devices pick up those attributes to present images to the person consuming them. However, not all users with vision disabilities use screen readers. So, if you feel like you'd rather make your alternative text available for everyone, it's common practice to surround an image description in square brackets and preface it with "Image description", like this:

```
[Image description: ...]
```

As for actually writing the image descriptions, that's going to take some practice. Imagine you are sitting socially distanced from a friend and you want to show them a picture you've come across on your phone, but you'd have to break social distance to physically show them. How would you describe the image to them in one or two sentences?

## 3. Semantic HTML

This point is a little more technical, but also useful for folks that use blogging platforms that provide text editors. The main lesson for this section? Use the elements that we have been given for their intended uses.

- Need to display things in a list format? Use a bullet (`<ul>` element) or numbered list (`<ol>` element).
- Have a navigation menu at the top of your site? Use a `<nav>` element.
- Have an element that users can click on to perform an important action? PLEASE use a `<button>` element. 😁

Using semantic HTML elments is so important because they're already able to be presented by assistive devices without much addition. You're going to start adding ARIA roles and properties the minute you start using `<div>`s for `<button>`s, and if you don't know what you're doing there, you can severely and negatively impact a screen reader user's experience.

You can read and practice with HTML semantic elements [here](https://www.w3schools.com/html/html5_semantic_elements.asp), on W3Schools.


You'll leave this post with straightforward action items for making your digital content more accessible.

Three Starting Points for Making Accessible Digital Content


We've reached the third part of our React & Firebase series. In [part one](https://ashleemboyer.com/react-firebase-blog-01), we learned how to set everything up. [Last time](https://ashleemboyer.com/react-firebase-blog-02), we made a page for creating new blog posts. Today, we're going to read single posts from our Firebase Realtime Database and show them in our app.

If you haven't read the first two posts, I have some starter code you can use instead. Just make sure you follow steps 1, 2, & 5 from [the first part](https://ashleemboyer.com/react-firebase-blog-01) before you go any further.

## 1. Clone the (Part 3) Starter Code [Optional]

Skip this step if you've successfully completed Part 2. Otherwise, you can clone the code by running the following command in the terminal:

```
git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-3.git
```

You'll need to change one file before continuing: `src/firebase.js`. If you open it, you'll see the following `config` constant:

```
const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>"
};
```

The attributes within the constant are used to connect your app to your Firebase project. To find these values, go to your project settings using through the gear icon in the left sidebar of the [Firebase console](https://console.firebase.google.com). Scroll down to the "Firebase SDK snippet" under "Your apps" and copy the attributes from what they're calling `firebaseConfig`. Replace the attributes in your `config` constant with these values.

Now you can run `npm install` and then `npm run start` to see your project in a browser.

## 2. Inspect the `Post` Component

You can find this component in the `src/pages/post.js` file. Let's take a look at what it does right now.

First, it grabs the slug from the URL using the `Router` we have set up in `src/App.js`. Components passed in to `Route` components within a `Router` have a `match` prop sent to them. There are other ways this prop is sent to components, and you can read more about that [over here](https://reacttraining.com/react-router/web/api/match).

Next, we have a `postSlugs` constant which is an array of slugs that exist with a real blog post. If you look at the database, these match the slugs we've given to the first and second blog posts. The problem is that this code isn't dynamic and it's also not connected to the database. We'll come back to this in a few.

Next, we're checking if the `slug` in the URL bar is one of the `postSlugs`. If it isn't, then the user is trying to see a post that doesn't actually exist. So, we return a `Redirect` to our `404` component. You can read more about the `Redirect` [over here](https://reacttraining.com/react-router/web/api/Redirect).

Finally, we have our return statement. Right now, it returns the same thing for every valid post `slug`. Instead, we want to show the real blog post content that we have stored in Firebase.

## 3. Connect the `Post` Component to Firebase

First, let's add import our `getFirebase` function so we can try to read from the database. While we're at it, we should also import `useState` to help manage a couple of things.

```
import React, { useState } from "react";

import { getFirebase } from "../firebase";
```

Next, let's think about how what we want to manage with `useState`. The first thing that comes to mind is a `loading` state. This will be a boolean that describes whether or not we are trying to load something from the database. We also want a variable for our `currentPost` that we're trying to read from the database. Replace the `postSlugs` line with the following two lines of code:

```
const [loading, setLoading] = useState(true);
const [currentPost, setCurrentPost] = useState();
```

We want to start in a loading state so the page can show something different to indicate to a user that the page is loading. You can show an animation, GIF, plain text, whatever you please. We'll keep it simple for now and just return some text like this:

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

Our database call needs to go right before this `if` statement, however. If we place it after, it will never be reached because the `if` statement is making the code return early. Here's what we'll add after our calls to `useState` and before the `if` statement we just wrote:

```
if (loading && !currentPost) {
  getFirebase()
    .database()
    .ref()
    .child(`/posts/${slug}`)
    .once("value")
    .then(snapshot => {
      if (snapshot.val()) {
        setCurrentPost(snapshot.val());
      }
      setLoading(false);
    });
}
```

Let's update our check on whether a post exists or not. Update `postDoesNotExist` to the following:

```
const postDoesNotExist = !currentPost;
```

These conditions might be a little confusing at first. What are we checking for? It might help to list the steps of execution here, which you can play around with yourself by adding some console logs to the file.

1. On first load: `loading` is true and `setCurrentPost` is undefined, so we go inside of the `if` statement. Once we make it into the `then`, if `snapshot.val()` returns an object (it'll be null if no post exists with the given `slug`), we call `setCurrentPost`, making `currentPost` no longer undefined.
2. After `setCurrentPost` call: Making this call will re-render the component. We reach our `if (loading && !currentPost)` statement again. Since `currentPost` is now defined, we do not go in the code block again, thus keep ourselves from unnecessarily making calls to the database. We reach the `if (loading)` statement. `loading` is still true, so the component returns some text and doesn't do anything else.
3. After `setLoading` call: Making this call will re-render the component. `loading` is now false and `currentPost` might be undefined or an object. That's where the `if (postDoesNotExist)` check comes in. If we didn't get a post back from the database, we return a `Redirect`, like before. Otherwise, we continue on to our final `return` where we show the post.

_I hope these steps aren't overwhelming and they help you see the power of hooks and state management! They're some of the coolest things about React, to me._

Here's how I'm displaying posts:

```
return (
  <>
    <img src={currentPost.coverImage} alt={currentPost.coverImageAlt}>
    <h1>{currentPost.title}</h1>
    <em>{currentPost.datePretty}</em>
    <p dangerouslySetInnerHTML={{ __html: currentPost.content }}></p>
  </img>
);
```

I also added a `12px` margin to the top of `<p>` elements in `src/index.js`.

Now, when you click a "Continue reading..." link or manually navigate to one of your posts, you should see something like this:

![Screenshot of a single blog post's page.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-03%2Fpost.png?alt=media&token=4a9abd6a-9549-467f-a473-ff86ae47357a)

Please [send me an email](mailto:hello@ashleemboyer.com) or [a Twitter DM](https://twitter.com/ashleemboyer) if you have any questions or concerns. I love hearing from you! 😊


Learn how to build a blog site with React and Firebase.

Build a React & Firebase Blog Site

Build a React & Firebase Blog Site Part 3


Welcome back! This is the second in a series of posts that will teach you how to build a blog site using React and Firebase. If you haven't read [the first post in the series](https://ashleemboyer.com/react-firebase-blog-01), I encourage you to do so. I'm including starter code for this post, but you'll additionally need to go through the following steps from the previous post to use it:

- Step 1: Sign up for Firebase (if you don't have an account already)
- Step 2: Create a project
- Step 5: Add Data to the Database

A fair warning: since this post is building off of Part 1, it assumes you have read the post if you're closely following along.

## 1. Clone the (Part 2) Starter Code [Optional]

Skip this step if you've successfully completed Part 1. Otherwise, you can start clone the code by running the following command in a terminal:

```
git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-2.git
```

You'll need to change one file before continuing: `src/firebase.js`. If you open it, you'll see the following `config` constant:

```
const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>"
};
```

The attributes within the constant are used to connect your app to your Firebase project. To find these values, go to your project settings using through the gear icon in the left sidebar of the [Firebase console](https://console.firebase.google.com). Scroll down to the "Firebase SDK snippet" under "Your apps" and copy the attributes from what they're calling `firebaseConfig`. Replace the attributes in your `config` constant with these values.

Now you can run `npm install` and then `npm run start` to see your project in a browser.

## 2. Add a Page for Creating Posts

To get started on implementing a "Create Post" feature, let's first make a page we'll use to create posts. Add a `create.js` file in `src/pages`. We're going to keep it really simple for now to make sure everything is still working.

> Developing code is most easy when you take incremental steps and check your work along the way.

Our `Create` component will give a friendly, "Hello," for now.

```
import React from "react";

const Create = () => {
  return <h1>Hello, from Create!</h1>;
};

export default Create;
```

Try navigating to the `/create` page. Uh, oh... the page isn't found?

![The 404 page.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2F404.png?alt=media&token=4665d673-fc43-4f64-ab14-4d5b8bf7ec9e)

No worries! We just need to add a `Route` for our new page in `src/App.js`. First add an import for the `Create` component:

```
import Create from "./pages/create";
```

Then, add the following `Route` below the one for the `/` path:

```
<Route path="/create" component={Create} />
```

The new create page should be working now!

![The create page.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-hello.png?alt=media&token=a4a5a0ac-005e-448c-8493-450a60f1f5e6)

## 3. Make Inputs for Describing Posts

Now, let's think about the data structure we have in our Realtime Database. Each of the following are attributes we use to describe a blog post:

- title
- slug
- date
- coverImage
- coverImageAlt
- content

Consider these two questions: Which of these attributes do we need to create an `<input>` for? Which ones can we automatically generate with some additional code? Well, ...

If I were making this blog site for a client, I would auto-generate the `slug` and the `date`. Dates aren't that hard to auto-generate, but slugs can be because of punctionation. We're not going to handle that here, but feel free to give it a try on your own! In addition, I'd likely provide a file upload input for `coverImage`, but that's also a little more complex than I'd like to take this post.

So, `date` is the only thing we're going to auto-generate. We'll have inputs for everything except `content`, which will get a `<textarea>`. Let's add all of those to our component and handle their values with `useState`. Your `src/pages/create.js` file should look like this:

_If this seems like a lot of redundant code to you, good catch! (And I'm sorry. 😅) We'll fix that in a "going further" post._

```
import React, { useState } from "react";

const labelStyles = {
  display: "block",
  marginBottom: 4
};

const inputStyles = {
  width: "100%",
  height: "2rem",
  lineHeight: "2rem",
  verticalAlign: "middle",
  fontSize: "1rem",
  marginBottom: "1.5rem",
  padding: "0 0.25rem"
};

const Create = () => {
  const [title, setTitle] = useState("");
  const [slug, setSlug] = useState("");
  const [coverImage, setCoverImage] = useState("");
  const [coverImageAlt, setCoverImageAlt] = useState("");
  const [content, setContent] = useState("");

  const createPost = () => {
    console.log({ title, slug, coverImage, coverImageAlt, content });
  };

  return (
    <>
      <h1>Create a new post</h1>
      <section style={{ margin: "2rem 0" }}>
        <label style={labelStyles} htmlFor="title-field">
          Title
        </label>
        <input
          style={inputStyles}
          id="title-field"
          type="text"
          value={title}
          onChange={({ target: { value } }) => {
            setTitle(value);
          }}
        />

        <label style={labelStyles} htmlFor="slug-field">
          Slug
        </label>
        <input
          style={inputStyles}
          id="slug-field"
          type="text"
          value={slug}
          onChange={({ target: { value } }) => {
            setSlug(value);
          }}
        />

        <label style={labelStyles} htmlFor="cover-image-field">
          Cover image
        </label>
        <input
          style={inputStyles}
          id="cover-image-field"
          type="text"
          value={coverImage}
          onChange={({ target: { value } }) => {
            setCoverImage(value);
          }}
        />

        <label style={labelStyles} htmlFor="cover-image-alt-field">
          Cover image alt
        </label>
        <input
          style={inputStyles}
          id="cover-image-alt-field"
          type="text"
          value={coverImageAlt}
          onChange={({ target: { value } }) => {
            setCoverImageAlt(value);
          }}
        />

        <label style={labelStyles} htmlFor="content-field">
          Content
        </label>
        <textarea
          style={{ ...inputStyles, height: 200, verticalAlign: "top" }}
          id="content"
          type="text"
          value={content}
          onChange={({ target: { value } }) => {
            setContent(value);
          }}
        />
        <div style={{ textAlign: "right" }}>
          <button
            style={{
              border: "none",
              color: "#fff",
              backgroundColor: "#039be5",
              borderRadius: "4px",
              padding: "8px 12px",
              fontSize: "0.9rem"
            }}
            onClick={createPost}
          >
            Create
          </button>
        </div>
      </section>
    </>
  );
};

export default Create;
```

Here's what your page should look like now:

![The create page with inputs.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-screen.png?alt=media&token=24abdd3c-da90-4438-a488-7c6fb95112d1)

Briefly fill in all of these fields and see what happens when you click the "Create" button! Is your console open? Then you should see an object printed with the values of all your inputs. Here's what mine looks like (_click to expand_):

![The create page with filled inputs and their values logged to the console.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-values-logged.png?alt=media&token=2de7263e-f573-4a4c-85a4-050ab479fee1)

## 4. Write a Create Function

Neat! This is also what I mean by incremental changes to code. Take it step by step. Let's get to the exciting part! We're going to send some stuff back to the database. First, we need to import our `getFirebase` function from `src/firebase.js`.

```
import { getFirebase } from "../firebase";
```

Now, add the `generateDate()` function, update the `createPost` function, and destructure the `history` prop from the `Create` component params:

```
const generateDate = () => {
  const now = new Date();
  const options = { month: "long", day: "numeric", year: "numeric" };

  const year = now.getFullYear();

  let month = now.getMonth() + 1;
  if (month < 10) {
    month = `0${month}`; // prepend with a 0
  }

  const day = now.getDate();
  if (day < 10) {
    day = `0${day}`; // prepend with a 0
  }

  return {
    formatted: `${year}-${month}-${day}`,             // used for sorting
    pretty: now.toLocaleDateString("en-US", options)  // used for displaying
  };
};
```

```
const createPost = () => {
  const date = generateDate();
  const newPost = {
    title,
    dateFormatted: date.formatted,
    datePretty: date.pretty,
    slug,
    coverImage,
    coverImageAlt,
    content
  };
  getFirebase()
    .database()
    .ref()
    .child(`posts/${slug}`)
    .set(newPost)
    .then(() => history.push(`/`));
};
```

```
const Create = ({ history }) => {
  ...
}
```

Fill in your inputs like we did a few minutes ago, click "Create post", and you should be brought to the home page with your new post at the very top!

![The home page with the new post listed first.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fnew-post.png?alt=media&token=85aa1f65-6be1-430f-badc-9490b5e6c66d)

## 5. Wrapping Up

Whew! I thought we'd be able to talk about all 4 CRUD functions in one post, but that was a lot. We'll continue on this adventure tomorrow. Great job so far. 💪

If come across any issues or questions, [send me an email](mailto:hello@ashleemboyer.com) or [DM me on Twitter](https://twitter.com/ashleemboyer)! Catch you again tomorrow. 😊


Build a React & Firebase Blog Site Part 2


Welcome! This is the first in a series of posts that will teach you how to build a blog site using React and Firebase. This one will probably be the longest because there are few things to do to set everything up.

At the end of this post, you'll have learned how to connect your app to Firebase and pull some data from [Firebase's Realtime Database](https://firebase.google.com/docs/database). Next time, we'll start setting up our CRUD functions with a "Create Post" feature. After that, we'll see what we can do to make an interface on the frontend that will make it easy to call our CRUD functions and easy to create more interesting functions.

Ready to get started? :)

## 1. Sign up for Firebase

This one is easy! Head over to [Firebase's website](https://firebase.google.com/) and click the "Get started" button. The page looks like this:

![Firebase's home page with a "Get started" button.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-home.png?alt=media&token=44402b1f-339f-4343-817d-952bc6c3bbe4)

You'll be prompted to choose a Google account if you're not already signed in to one. Once you're signed in, you can create a project. Here's what that page will look like if you're brand-new to Firebase:

![The Firebase console where a project can be created.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-welcome.png?alt=media&token=8433b1fc-49ff-42a3-8bb1-21e52cb966be)

## 2. Create a Project

Click the "Create a project" button to begin the three step process. First, you'll be prompted for a project name. I'm naming my project `react-firebase-blog`. You can change your project ID if you want, but going with the automatically generated one is fine too.

![Step 1 of the process.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-01.png?alt=media&token=c238d4b6-3580-4f3d-9a92-4651cd01662d)

Step 2 asks us if we want to set up Google Analytics for the project. I'm selecting "Not right now". If you choose this option, the process ends here. Otherwise, there's another step

![Step 2 of the process.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-02.png?alt=media&token=fb748ae2-44fb-4626-ada7-f2b31e73a510)

Click "Create project" and you'll be brought to a loading screen. When it says, "Your new project is ready," click the "Continue" button.

![The "Your project is ready" message with a "Continue" button.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-ready.png?alt=media&token=3f419470-28e2-4a07-8b36-92b32f8a5b3a)

## 3. Clone the Starter Code

You can clone the starter code by running the following command in a terminal:

```
git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git
```

Let's see what we've got! Go ahead and get the project rolling by changing into the `react-firebase-blog-starter` directory, running `npm install`, and finally running `npm run start`. Here's what you should see:

![Preview of the starter app.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fstarter-site.png?alt=media&token=a0e21d1e-a951-4871-a98f-a9c42f588697)

Hooray! Go ahead and explore the project a little. I'll highlight a few areas for you to begin.

1. `src/App.js`

   We have 4 `Routes`: the home page, a 404, and another for handling blog post slugs (aka URLs). You might be wondering why there's not one for handling non-matching paths. Good catch! We're actually handling that in the `Post` component (`src/pages/post.js`). Let's go ahead and look at that one.

2. `src/pages/post.js`

   Because we're using a Router in `src/App.js` (comes from `react-router-dom`), the components we name in `Route` elements will have a [`match`](https://reacttraining.com/react-router/web/api/match) passed into their props. We can get the slug for a post from the URL bar with `match.params.slug`, then compare that to a list of slugs we support on the site. Those are hard-coded into a `postSlugs` variable for now. If the slug does not exist, we return a `Redirect` to our 404 page. Otherwise, we'll display the correct post.

3. `src/pages/home.js`

   First, you'll se the `blogPosts` variable. We're hard-coding our posts until we connect our app to Firebase. All this page does is return a `section` element for every blog post in the `blogPosts` array. You shouldn't need to change anything after the `return` statement as we make our way through this series.

## 4. Connect Firebase to the application

First, install the [`firebase` package](https://www.npmjs.com/package/firebase) by running `npm install firebase` in the root directory of the project.

Now, create a JavaScript file in the `src` directory of the project and call it `firebase.js`. This is where we'll define our Firebase configs and initialize the Firebase objects.

Before we add some code to this file, let's get the config data we need about our Firebase project. Go to the Firebase project settings by clicking the settings gear in the left sidebar and selecting "Project settings" from the menu. Scroll down to the "Your apps" section of the page. It's probably at the bottom. It should say, "There are no apps in your project."

![Screenshot of the 'Your apps' section of the project settings.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fproject-settings.png?alt=media&token=63cb601f-0eb7-49eb-a7c9-dbb5f6bf53ac)

Click the circle that looks like `</>` in order to add Firebase to a web app. You'll be prompted for the App's nickname. I'm calling mine `React Firebase Blog`.

![Screenshot of the prompt for the app's nickname.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fapp-nickname.png?alt=media&token=513f98b4-37ef-42aa-b45f-f793e5e37c6c)

Click the "Register app" button, and after the page finishes loading, you'll see some HTML code that has a variable called `firebaseConfig`. Copy the JSON attributes from that variable and hold on to them for our `firebase.json` file. Click the "Continue to console" button to get back to your project settings. If you lose the JSON attributes you copied previously, you can find them again here, under the "Your apps" section that now has our app listed.

Let's go back to our `firebase.js`. Have your config data ready and plug it in to the following code:

```
import firebase from "firebase/app";
import database from "firebase/database";

const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>",
};

let firebaseCache;

export const getFirebase = () => {
  if (firebaseCache) {
    return firebaseCache;
  }

  firebase.initializeApp(config);
  firebaseCache = firebase;
  return firebase;
};
```

The `getFirebase()` function will ensure we only call `initializeApp` one time.

## 5. Add Data to the Database

We can't read any data from our database until we actually add to it! Go back to your Firebase project and click the "Database" option under the "Develop" heading in the sidebar. You'll have to scroll down the page a little until you find the "Realtime Database" section.

![Screenshot of the Realtime Database section.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Frealtime-database.png?alt=media&token=2bc78aa3-e902-46fd-a775-95042cd5cc0e)

Click the "Create database" button within this section. You'll see a modal come up asking you about the security rules for your database.

![The 'security rules' modal.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fsecurity-rules.png?alt=media&token=fbd9e6fc-63ac-41d3-b8c9-779a9224c598)

Select "Start in **test mode**" and click the "Enable" button. Your database will be empty and read something like:

```
<YOUR-PROJECT-ID>: null
```

If you didn't already know, the Realtime Database is just a JSON object. You can read more about that [here](https://firebase.google.com/docs/database).

The quickest way to get started is to import data using a JSON file. I'm also providing this for you in case you're following along closely and want to have the same things show as what I have here. You can find this file in the root directory of the starter project. Click the three dots menu and select "Import JSON" to get to the file upload. Browse for your file, and then click the "Import" button.

Now you should have some data attributes you can expand and explore!

![The data imported into the Realtime Database.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fdata.png?alt=media&token=70461f67-df46-41b4-b15a-c53fc343d3b4)

## 6. Read from the Database

Finally! The moment we've all been waiting for. Let's head over to `src/home.js` and see if we can get some stuff from the database!

First, add some imports to the top of the file:

```
// You only need to add the `{ useState }` portion here.
import React, { useState } from "react";

// This is new.
import { getFirebase } from "../firebase";
```

Now, let's get `blogPosts` into a state and try to read them from the database. You can read more about the `useState` hook over [here](https://reactjs.org/docs/hooks-state.html). We're also going to add a `loading` state so we can easily do two things:

1. Make sure we only call `getFirebase` once
2. Show the user a loading screen while we wait for data

Replace the `blogPosts` constant with the following code:

```
const [loading, setLoading] = useState(true);
const [blogPosts, setBlogPosts] = useState([]);

if (loading && !blogPosts.length) {
  getFirebase()
    .database()
    .ref("/posts")
    .orderByChild("dateFormatted")
    .once("value")
    .then(snapshot => {
      let posts = [];
      const snapshotVal = snapshot.val();
      for (let slug in snapshotVal) {
        posts.push(snapshotVal[slug]);
      }

      const newestFirst = posts.reverse();
      setBlogPosts(newestFirst);
      setLoading(false);
    });
}

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

Tada! You should see the exact same thing we had before. 🎉

## 7. Wrapping Up

There was a ton of stuff here. If you have any questions or concerned, please [send me an email](mailto:hello@ashleemboyer.com) or [DM me on Twitter](https://twitter.com/ashleemboyer)! I'll try to give you a hand if you're feeling stuck or overwhelmed. Stay tuned for tomorrow's post where we will cover writing CRUD functions for our new, fancy blog site! If you're feeling squirrely and want to give it a go before then, I encourage you to check out the [Firebase documentation](https://firebase.google.com/docs/database/web/start).


Build a React & Firebase Blog Site Part 1&mdash;Setup and Read Data


I came across some issues on touch screens where I have a navigation menu expanded and the common "shadow" showing on the non-menu portion of the screen. When I tried tapping on the "shadow" to close the menu, way too many things were happening! Here's a quick illustration of what sort of screen I'm talking about:

![Mobile screenshot of a menu and its shadow](https://thepracticaldev.s3.amazonaws.com/i/ql9hc8t6rgeghdx1ikgw.png)

When a user taps on the "shadow" portion of the screen, they expect the menu to close. Nothing else should happen. You can handle this by adding a `touchstart` event listener to the element used for the shadow, but there are a couple of things to watch out for. It won't behave the same as a `click` event listener you use for the desktop version of your app.

It's all about when events are fired. A `click` event doesn't go until after a click is over and a mouse button is released. So, when a user clicks on the "shadow" with their mouse, there aren't any side effects. It's a different story for touchscreens, however.

If the items "behind" the "shadow" are clickable, a user touching the "shadow" to close the menu will also cause fire off the click events on those items. It's a pretty simple fix. In your `touchstart` listener, all you have to do is call `preventDefault` on the event passed into the listener. It might go something like this:

![Screenshot of touchstart event listener code showing call to preventDefault and some example lines of code for hiding the shadow and menu](https://thepracticaldev.s3.amazonaws.com/i/llil1vy7msaoswf3dbtf.png)

It's really that easy&mdash;a one-line fix. It wasn't super obvious to me at first, so I hope this helps clear things up for anyone else in the same boat as me. Have you ever run into similar issues? If so, enlighten us in the comments and save us some pain! :)


The touchstart event in mobile web apps is a little different than the click event. Here's how I solved an issue I've run into frequently.

How to Handle touchstart Events with Stacked Elements


As someone who's new to the web dev game, I find it hard to accept all my ideas as good ones. Yes, you read that right, _all_ ideas are good ideas. Ideas are similar to questions, it's all about the timing. Every single idea you have leads to a learning experience.

{% link ashleemboyer/don-t-be-afraid-to-ask-questions-5g99 %}

There's a lot of pressure to make something _cool_ or _super useful_ and _profitable_. You don't have to do that right now, especially if you're learning a new framework. You can make any app you want to, for whatever reason you want to. If no one is getting hurt, just do it!

There are no dumb ideas. Some ideas are better than others obviously, but all ideas keep our creative juices flowing. Once you get started, it'll be hard to stop. Eventually, you'll find the best idea to suit your current situation. All you have to do is sit and listen to your thoughts without judgment. Let them all pour out freely.

Now, let's hear those app ideas! Maybe you'll find someone with a similar idea. Maybe get in touch and think about collabing. :)


Like questions, there are no dumb ideas. Every single idea you have leads to a learning experience.

Just Make That App


I decided to take this approach when I made [https://blackbirthdays.com](https://blackbirthdays.com). Originally, for the month of February, it showed a different person each day for their birthday. So, since there was very static data for the site, I decided to just feed the information into it with a JSON file. I wanted to practice something with Gatsby, so I got to practice [programmatically creating pages from data](https://www.gatsbyjs.org/tutorial/part-seven/) and [using GraphQL for getting data](https://www.gatsbyjs.org/tutorial/part-four/).

I couldn't remember exactly every step for doing this, so [I made a new site](https://ashleemboyer.github.io/colors/) for this post specifically. No worries, I plan on making it way better soon. I hope it can become a helpful tool for looking at text color/background color contrasts eventually. Anyways, here we go!

### 1. Create your project

The easiest step. :) Head over to the [Gatsby tutorials](https://www.gatsbyjs.org/docs/quick-start/) if you have any issues or need help setting things up.

![Terminal commands for setting up a new Gatsby project](https://thepracticaldev.s3.amazonaws.com/i/d89dd76oml8yy3rsepy6.png)

### 2. Create the JSON file

Put a new JSON file in the root directory of your project. I had a little bit of issue with the data structure itself, but I think it just takes practice. It's easier to read data from GraphQL with arrays, so try to put your data into that sort of format.

![How I formatted the color data](https://thepracticaldev.s3.amazonaws.com/i/peuhc2g8ovcrkvoajzj5.png)

### 3. Create a template file

This template file defines how all of your dynamically created pages will be displayed. Cool, huh??! You can read a bit more about this [on Gatsby's site](https://www.gatsbyjs.org/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/#creating-a-page-template).

![Code for the template file](https://thepracticaldev.s3.amazonaws.com/i/6jbcscj813zgm4ekuyeb.png)

### 4. Make the `gatsby-node.js` file create all the pages

This file should already be in your root directory from the `gatsby new` command from step 1. This is where you implement the `createPages` API function and tell the site about the template file you created in the previous step. On the second line of the screenshot below, I specify the JSON file from step 2.

![Code for the gatsby-node.js file](https://thepracticaldev.s3.amazonaws.com/i/x42s5fslzctbnfrpurs0.png)

### 5. Restart the development server and preview your site

Everything should be good to go at this point and you can start styling. Have at it! Share your results if you give this a try, or let me know if something seems off in any of the steps. Enjoy! :)


Looking for the next thing to try after generating your site with markdown? Try it out with a static JSON file.

Build a Multi-Page Gatsby Site from JSON


The worst part of finishing a tutorial is not knowing what to do next. You _could_ go look up some app ideas online, but aren't you tired of making to-do lists and calculators you probably won't use? It probably feels like there's nothing left to make.

![Jack Tripper saying, "Well, as a matter of fact, there is something"](https://media.giphy.com/media/FeiQbJ2BjZLoHdD5oB/giphy.gif)

What about a resume? I spent today coding mine up using Gatsby (I really needed to use the typography and icon plugins), then I did a swift little `ctrl-p` > "Save to PDF". It was much easier for me to do it this way than to make something in LibreOffice Draw. The program always seems to distort colors and such anyways.

So... what makes a resume the _perfect_ project?

- It's only one page&mdash;that's not too much work.
- You can practice laying things out with CSS if you do what I did and use two columns.
- There's all types of elements you can practice with: headers, paragraphs, links, and lists.
- Again, if you use two columns, you can practice placing your elements in the correct order for accessibility.
- You can use get some extra practice with tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/) that test accessibility, performance, and best practices.
- After it's done, you can add it to your personal/portfolio site(s) and have something great-looking to brag about. 😉

Still feeling a little uninspired about design? Take a look at these sites for some resume examples:

- [Piktochart](https://piktochart.com/blog/well-designed-resume-examples-inspiration/)
- [Dribbble](https://dribbble.com/search?q=resume)
- [Awwwards](https://www.awwwards.com/inspiration/search?text=resume)

If you have any other ideas, or would like to share your work, please do leave it in the comments below or [send me a tweet](https://twitter.com/ashleemboyer)! I love seeing what other people create. 😊


Do you ever feel stumped on what project to create in a new framework after you finish your first tutorial? This one is simple and also a productive use of your time.

Posts Related to the "web-development" Tag