<p>I recently came across <a href="https://twitter.com/SaraSoueidan/status/1390598514774847496">a tweet from Sara Soueidan</a> 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:</p>
<ul>
<li>What the heck are they?</li>
<li>What are they for?</li>
<li>I thought people didn't use them anymore?</li>
</ul>
<p>If you also have questions like this, I recommend reading <a href="https://rss.com/blog/how-do-rss-feeds-work/">How Do RSS Feeds Work?</a> right from RSS.com. The first few words really sum it up:</p>
<blockquote>
<p>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!</p>
</blockquote>
<p>To better understand how RSS feeds are consumed, I created my own RSS reader app and I also <a href="https://ashleemboyer.com/create-your-own-nextjs-rss-reader-app">wrote about it</a> 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!</p>
<h2>How I Added an RSS Feed to my Next.js Site</h2>
<p>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 <code>&lt;description&gt;</code> nor <code>content</code> of each <code>&lt;item&gt;</code> in the channel can't have regular HTML in it. <a href="https://cyber.harvard.edu/rss/encodingDescriptions.html">The HTML tags must be encoded</a>. 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.</p>
<p>After struggling for hours and trying several different approaches, I <a href="https://twitter.com/AshleeMBoyer/status/1391568723581054978">went to Twitter for help</a>. There were a lot of helpful replies! I found exactly what I ended up using thanks to <a href="https://github.com/sweeneyapps/html2rssfeed">an example project</a> from <a href="https://twitter.com/vphreak/status/1391853784666501121">@vphreak</a>. So, what did it take?</p>
<p>First, I installed <a href="https://github.com/jpmonette/feed">the <code>feed</code> package</a>.</p>
<pre><code class="language-bash">yarn add feed
</code></pre>
<p>Then, I added a <code>generateRSSFeed</code> function.</p>
<pre><code class="language-js">const generateRSSFeed = (articles) =&gt; {
  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:
      &quot;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.&quot;,
    id: baseUrl,
    link: baseUrl,
    language: 'en',
    feedLinks: {
      rss2: `${baseUrl}/rss.xml`,
    },
    author,
  });

  // Add each article to the feed
  articles.forEach((post) =&gt; {
    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());
};
</code></pre>
<p>Finally, I updated the <code>getStaticProps</code> function exported from <code>src/pages/index.jsx</code> to call the new <code>generateRSSFeed</code> function.</p>
<pre><code class="language-js">export async function getStaticProps() {
  const articles = getAllArticles();
  articles.sort((a, b) =&gt; (a.meta.date &lt; b.meta.date ? 1 : -1)

  generateRSSFeed(articles);

  return { props: { articles } };
}
</code></pre>
<p>Because my site is set up to build only when my main git branch is updated, <code>getStaticProps</code> will be called at that time and so will <code>generateRSSFeed</code>. 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.</p>
<h2>Resources</h2>
<ul>
<li><a href="https://validator.w3.org/feed/docs/rss2.html">RSS 2.0 Specification</a></li>
<li><a href="https://github.com/jpmonette/feed#readme"><code>feed</code> GitHub repository</a></li>
<li><a href="https://www.w3schools.com/xml/xml_rss.asp">W3Schools XML RSS page</a></li>
</ul>


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

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

<p>I recently came across <a href="https://twitter.com/SaraSoueidan/status/1390598514774847496">a tweet from Sara Soueidan</a> 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:</p>
<ul>
<li>What the heck are they?</li>
<li>What are they for?</li>
<li>I thought people didn't use them anymore?</li>
</ul>
<p>If you also have questions like this, I recommend reading <a href="https://rss.com/blog/how-do-rss-feeds-work/">How Do RSS Feeds Work?</a> right from RSS.com. The first few words really sum it up:</p>
<blockquote>
<p>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!</p>
</blockquote>
<p>RSS feeds mean I can read all of my favorite blogs in one place?? And I don't <em>have</em> 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.</p>
<p>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.</p>
<p>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!</p>
<h2>How to Create Your Own Next.js RSS Reader App</h2>
<h3>Fork and clone the repo</h3>
<p>First, you need to create a fork of the starter code.</p>
<ol>
<li>Go to <a href="https://github.com/ashleemboyer/nextjs-rss-reader-starter">the GitHub repository</a></li>
<li>Click the &quot;Fork&quot; button at the top right of the page</li>
<li>Follow the steps provided by GitHub</li>
</ol>
<p>Second, clone the fork you've created onto your machine and install the dependencies.</p>
<pre><code class="language-bash">git clone &lt;your fork&gt;    # Clones the fork
yarn                     # Installs the dependencies
</code></pre>
<h3>Set up Firebase Authentication</h3>
<p>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).</p>
<ol>
<li>Go to <a href="https://console.firebase.google.com">console.firebase.google.com</a> and make sure you're logged in with the Google account you want to use.</li>
<li>Click the card that says &quot;Add project&quot;. It should be the first one listed.</li>
<li>Enter a project name. I'm going to use <code>nextjs-rss-reader</code>.</li>
<li>Toggle &quot;Enable Google Analytics for this project&quot; to off.</li>
<li>Click &quot;Create project&quot;.</li>
<li>Click &quot;Continue&quot; when your new project is ready.</li>
</ol>
<p>Here's a video showing these steps (the project name is different):</p>
&lt;iframe width=&quot;100%&quot; height=&quot;350&quot; src=&quot;https://www.youtube-nocookie.com/embed/2w5BV9ft82g&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<p>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!</p>
<ol>
<li>Go to <a href="console.firebase.google.com">the Firebase console</a> for your project.</li>
<li>Go to the &quot;Authentication&quot; page under &quot;Build&quot;.</li>
<li>Click &quot;Get Started&quot;.</li>
<li>You should be on the &quot;Sign-in method&quot; tab.</li>
<li>Click &quot;Email/Password&quot;.</li>
<li>Enable the first toggle.</li>
<li>Click &quot;Save&quot;.</li>
<li>Switch to the &quot;Users&quot; tab.</li>
<li>Click &quot;Add user&quot;.</li>
<li>Enter a secure email and password.</li>
<li>Click &quot;Add user&quot;.</li>
</ol>
<p>Here's a video showing these steps:</p>
&lt;iframe width=&quot;100%&quot; height=&quot;350&quot; src=&quot;https://www.youtube-nocookie.com/embed/WTnIU0ZtCoo&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<h3>Create an RSS to JSON account</h3>
<p>Next, let's set up an <a href="rss2json.com">RSS to JSON</a> 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.</p>
<ol>
<li>Sign up for an RSS to JSON account at <a href="https://rss2json.com/sign-up">this link</a></li>
<li>Get your API key from <a href="https://rss2json.com/me/api_key">the My Account page</a> and have it ready for the next step.</li>
</ol>
<h3>Create a .env file</h3>
<p>In the root of your forked project, create a file called <code>.env</code>. It will have four items in it.</p>
<pre><code class="language-env">RSS_2_JSON_API_KEY=&lt;your RSS to JSON api key&gt;
NEXT_PUBLIC_FIREBASE_API_KEY=&lt;your Firebase project's API key&gt;
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=&lt;your Firebase project's auth domain&gt;
NEXT_PUBLIC_FIREBASE_PROJECT_ID=&lt;your Firebase project ID&gt;
</code></pre>
<p>Put your RSS to JSON API key from the previous step with the <code>RSS_2_JSON_API_KEY</code> item. You can get the other items from Firebase after registering your app. Here are the steps for that:</p>
<ol>
<li>Go to <a href="console.firebase.google.com">the Firebase console</a> for your project.</li>
<li>Go to the project settings.</li>
<li>Scroll to the bottom of the page where it says &quot;Your apps.&quot;</li>
<li>Click the &quot;&lt;/&gt;&quot; button to register your app for web.</li>
<li>For &quot;App nickname&quot;, enter <code>nextjs-rss-reader</code>.</li>
<li>Click the &quot;Register app&quot; button.</li>
<li>Copy and paste the <code>apiKey</code>, <code>authDomain</code>, and <code>projectId</code> values with the last three items in your <code>.env</code> file.</li>
</ol>
<h3>Start the app</h3>
<p>We're ready to go! Start the app with <code>yarn dev</code> 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.</p>
<p><img src="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&amp;token=0ec4c0d0-6939-4858-a76d-31bd7d2f5010" alt="Browser window screenshot with a background of large, dark green leaves. The window shows a white webpage showing &quot;Log In&quot; text at the top. There is an input for email and password and a gray &quot;Sign In&quot; button." /></p>
<p>After logging in, you should see a list of articles. You can click the &quot;Read here&quot; links to read the article within your app, or you can click the &quot;Read at source&quot; link to read the original version of the article!</p>
<p><img src="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&amp;token=81e422b0-addc-47fe-ae3d-539477222d39" alt="Browser window screenshot with a background of large, dark green leaves. The window shows a white webpage with black text. The title is &quot;My RSS Reader&quot; 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." /></p>
<h3>Customize your feed</h3>
<p>The app knows what feeds to fetch by the <code>feed.txt</code> 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:</p>
<pre><code class="language-txt">https://www.a11yproject.com/feed/feed.xml
https://webaim.org/blog/feed/
http://www.webaxe.org/feed/
</code></pre>
<p>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. :)</p>


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

<p>Welcome to the fifth and final post in my new &quot;Build a Blog Site with Next.js and Firebase&quot; series! This series is pretty similar to a series I wrote in 2019: <a href="https://ashleemboyer.com/series/react-firebase-blog">&quot;Build a React &amp; Firebase Blog Site&quot;</a>. 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 <a href="https://twitter.com/ashleemboyer">Twitter</a> or <a href="mailto:hello@ashleemboyer.com">email</a> if you run into any issues.</p>
<ul>
<li><em><a href="/blog/nextjs-firebase-blog-01">Read Part 1 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-02">Read Part 2 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-03">Read Part 3 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-04">Read Part 4 of the series</a></em></li>
</ul>
<hr />
<h2>Add a Page for Editing Posts</h2>
<ol>
<li>Add a new <code>updatePost</code> function to <code>lib/firebase.js</code>:</li>
</ol>
<pre><code class="language-js">/*
Updates the data for the given post in the database.
*/
export const updatePost = async (post) =&gt; {
  initFirebase();

  return firebase.database().ref(`/posts/${post.slug}`).set(post);
};
</code></pre>
<ol start="2">
<li>Add <code>edit.module.scss</code> to the <code>styles</code> directory:</li>
</ol>
<pre><code class="language-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;
    }
  }
}
</code></pre>
<ol start="3">
<li>Add an <code>edit</code> directory to <code>pages</code>.</li>
<li>Add <code>[slug].js</code> to <code>pages/edit</code> directory:</li>
</ol>
<pre><code class="language-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 }) =&gt; {
  const router = useRouter();
  const [user, userLoading] = useAuth();
  const [values, setValues] = useState(post);
  const [isLoading, setIsLoading] = useState(false);

  if (userLoading) {
    return null;
  }

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

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

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

  const handleSubmit = (e) =&gt; {
    e.preventDefault();

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

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

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

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

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

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

export default EditPage;
</code></pre>
<ol start="5">
<li>Go to <code>http://localhost:3000/edit/my-first-blog-post</code> in your browser. It should look a lot like the create page.</li>
<li>Change something about the post and click &quot;Update&quot;.</li>
<li>You should be taken to the page for the post and should see your changes.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding EditPage component&quot;
git push
</code></pre>
<h2>Install FontAwesome</h2>
<ol>
<li>Install the <code>@fortawesome/fontawesome-svg-core</code>, <code>@fortawesome/free-solid-svg-icons</code>, and <code>@fortawesome/react-fontawesome</code> packages:</li>
</ol>
<pre><code class="language-bash">npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
</code></pre>
<ol start="2">
<li>Load the icons in <code>pages/_app.js</code>:</li>
</ol>
<pre><code class="language-jsx">import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas);
</code></pre>
<ol start="3">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Installing FontAwesome&quot;
git push
</code></pre>
<h2>Add an Icon component</h2>
<p>We're going to make a wrapper component for the <code>FontAwesomeIcon</code> to make it easy to render an icon at different sizes and so we don't have to remember the import path for the <code>FontAwesomeIcon</code> component. The <code>classnames</code> package is great conditionally applying classes based on boolean props passed to a component. You can read more about the package <a href="https://github.com/JedWatson/classnames#readme">here</a>.</p>
<ol>
<li>Install the <code>classnames</code> package:</li>
</ol>
<pre><code>npm install classnames
</code></pre>
<ol start="2">
<li>Add <code>Icon</code> directory to the <code>components</code> directory.</li>
<li>Add <code>Icon.module.scss</code> to the <code>components/Icon</code> directory:</li>
</ol>
<pre><code class="language-scss">$icon-small: 1rem;
$icon-medium: 1.5rem;
$icon-large: 2rem;

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

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

  &amp;--large {
    width: $icon-large;
    height: $icon-large;
    font-size: $icon-large;
  }
}
</code></pre>
<ol start="4">
<li>Add <code>Icon.jsx</code> to the <code>components/Icon</code> directory:</li>
</ol>
<pre><code class="language-jsx">import classNames from 'classnames/bind';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import styles from './Icon.module.scss';

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

  return &lt;FontAwesomeIcon className={className} icon={name} /&gt;;
};

export default Icon;
</code></pre>
<ol start="5">
<li>Update <code>components/index.js</code> to export <code>Icon</code>:</li>
</ol>
<pre><code class="language-js">export { default as Icon } from './Icon/Icon';
</code></pre>
<ol start="6">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding Icon component&quot;
git push
</code></pre>
<h2>Add a Link for EditPage</h2>
<ol>
<li>Import the new <code>Icon</code> component in <code>PostPage</code> (that's <code>pages/post/[slug.js]</code>):</li>
</ol>
<pre><code class="language-jsx">import { Icon, Layout } from '@components';
</code></pre>
<ol start="2">
<li>Also import <code>useAuth</code> in <code>PostPage</code>:</li>
</ol>
<pre><code class="language-jsx">import { useAuth } from '@contexts/auth';
</code></pre>
<ol start="3">
<li>Invoke <code>useAuth</code> after <code>useRouter</code> in <code>PostPage</code>:</li>
</ol>
<pre><code class="language-jsx">const [user] = useAuth();
</code></pre>
<ol start="4">
<li>Wrap the <code>&lt;h1&gt;</code> with the post's title in a <code>&lt;div&gt;</code> and also render an edit link in the <code>&lt;div&gt;</code> if there's an authenticated user:</li>
</ol>
<pre><code class="language-jsx">&lt;div&gt;
  &lt;h1&gt;{post.title}&lt;/h1&gt;
  {user &amp;&amp; (
    &lt;a href={`/edit/${post.slug}`}&gt;
      &lt;Icon name=&quot;pencil-alt&quot; /&gt;
    &lt;/a&gt;
  )}
&lt;/div&gt;
</code></pre>
<ol start="5">
<li>After the <code>&lt;h1&gt;</code> styles in <code>styles/post.module.scss</code>, add styles for the <code>&lt;a&gt;</code> element:</li>
</ol>
<pre><code class="language-scss">a {
  padding: 8px;
  color: black;
}
</code></pre>
<ol start="6">
<li>Go to <code>http://localhost:3000/post/my-first-blog-post</code> in your browser.</li>
<li>Click the new pencil icon.</li>
<li>You should be taken to the edit page for <code>my-first-blog-post</code>.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding edit link&quot;
git push
</code></pre>
<h2>Add a Delete Button</h2>
<ol>
<li>Add a new <code>deletePost</code> function in <code>lib/firebase.js</code>:</li>
</ol>
<pre><code class="language-js">/*
Deletes a post from the database.
*/
export const deletePost = async (slug) =&gt; {
  initFirebase();

  return firebase.database().ref(`/posts/${slug}`).set(null);
};
</code></pre>
<ol start="2">
<li>Import the <code>deletePost</code> function in <code>PostPage</code>:</li>
</ol>
<pre><code class="language-jsx">import { deletePost, getPostBySlug } from '@lib/firebase';
</code></pre>
<ol start="3">
<li>At the same level as the edit link we just added in the previous section, add a <code>&lt;button&gt;</code> and wrap both elements in a <code>div</code>:</li>
</ol>
<pre><code class="language-jsx">&lt;span&gt;
  &lt;a href={`/edit/${post.slug}`}&gt;
    &lt;Icon name=&quot;pencil-alt&quot; /&gt;
  &lt;/a&gt;
  &lt;button
    onClick={() =&gt; {
      const shouldDeletePost = confirm(
        'Are you sure you want to delete this post?',
      );
      if (shouldDeletePost) {
        deletePost(post.slug).then(() =&gt; {
          router.push('/');
        });
      }
    }}
  &gt;
    &lt;Icon name=&quot;trash-alt&quot; /&gt;
  &lt;/button&gt;
&lt;/span&gt;
</code></pre>
<ol start="4">
<li>Replace the <code>a</code> styles you added to <code>styles/post.module.scss</code> with these:</li>
</ol>
<pre><code class="language-scss">&amp; &gt; div {
  display: flex;
  margin: 0;

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

  button {
    background: transparent;
    box-shadow: none;
    border: none;
    color: black;
  }
}
</code></pre>
<ol start="5">
<li>Create a new post for testing the delete functionality.</li>
<li>Go to the post's page and you should see a trashcan icon to the right of the pencil icon like this:</li>
</ol>
<p><a href="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&amp;token=5371736e-21fe-41b4-b3a0-ed9b5ad6cde0"><img src="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&amp;token=5371736e-21fe-41b4-b3a0-ed9b5ad6cde0" alt="View of the trashcan and other icon." /></a></p>
<ol start="7">
<li>Click the trashcan icon and you should see an alert that says &quot;Are you sure you want to delete this post?&quot;</li>
<li>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.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding delete button&quot;
git push
</code></pre>
<ol start="0">
<li>Celebrate!!! You did it!!! &lt;span role=&quot;img&quot; aria-label=&quot;party popper emoji&quot;&gt;🎉&lt;/span&gt;</li>
</ol>


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

<p>Welcome to the fourth post in my new &quot;Build a Blog Site with Next.js and Firebase&quot; series! This series is pretty similar to a series I wrote in 2019: <a href="/series/react-firebase-blog">&quot;Build a React &amp; Firebase Blog Site&quot;</a>. 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!</p>
<ul>
<li><em><a href="/blog/nextjs-firebase-blog-01">Read Part 1 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-02">Read Part 2 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-03">Read Part 3 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-05">Read Part 5 of the series</a></em></li>
</ul>
<hr />
<p>The importance of authentication in this app is making it so only <em>you</em> can create, edit, and delete posts. It is <em>your</em> 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.</p>
<h2>Set up Authentication in the Firebase Console</h2>
<p>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! <em>There's a video after these steps that visually walks though how to do this.</em></p>
<ol>
<li>Go to <a href="console.firebase.google.com">the Firebase console</a> for your project.</li>
<li>Go to the &quot;Authentication&quot; page under &quot;Build&quot;.</li>
<li>Click &quot;Get Started&quot;.</li>
<li>You should be on the &quot;Sign-in method&quot; tab.</li>
<li>Click &quot;Email/Password&quot;.</li>
<li>Enable the first toggle.</li>
<li>Click &quot;Save&quot;.</li>
<li>Switch to the &quot;Users&quot; tab.</li>
<li>Click &quot;Add user&quot;.</li>
<li>Enter a secure email and password.</li>
<li>Click &quot;Add user&quot;.</li>
</ol>
&lt;iframe width=&quot;100%&quot; height=&quot;350&quot; src=&quot;https://www.youtube-nocookie.com/embed/WTnIU0ZtCoo&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<ol start="12">
<li>Go to your Realtime Database.</li>
<li>Click the &quot;Rules&quot; tab.</li>
<li>Update the rules to allow all reads but only authenticated writes:</li>
</ol>
<pre><code class="language-json">{
  &quot;rules&quot;: {
    &quot;.read&quot;: true,
    &quot;.write&quot;: &quot;auth != null&quot;
  }
}
</code></pre>
<ol start="15">
<li>Click the &quot;Publish&quot; button.</li>
</ol>
<h2>Manage Authentication State with React Context</h2>
<ol>
<li>Import <code>firebase/auth</code> into <code>lib/firebase.js</code> after the other Firebase imports:</li>
</ol>
<pre><code class="language-js">import 'firebase/auth';
</code></pre>
<ol start="2">
<li>Add an <code>onAuthStateChanged</code> function to <code>lib/firebase.js</code>:</li>
</ol>
<pre><code class="language-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) =&gt; {
  initFirebase();

  return firebase.auth().onAuthStateChanged((user) =&gt; callback(user));
};
</code></pre>
<ol start="3">
<li>Add a <code>contexts</code> directory at the root of the project.</li>
<li>Update <code>jsconfig.json</code> for the new <code>contexts</code> directory:</li>
</ol>
<pre><code class="language-json">{
  &quot;compilerOptions&quot;: {
    &quot;baseUrl&quot;: &quot;./&quot;,
    &quot;paths&quot;: {
      &quot;@components&quot;: [&quot;components&quot;],
      &quot;@contexts/*&quot;: [&quot;contexts/*&quot;],
      &quot;@lib/*&quot;: [&quot;lib/*&quot;],
      &quot;@styles/*&quot;: [&quot;styles/*&quot;]
    }
  }
}
</code></pre>
<ol start="5">
<li>Add an <code>auth.js</code> file to <code>contexts</code>:</li>
</ol>
<pre><code class="language-js">import { createContext, useState, useEffect, useContext } from 'react';
import { onAuthStateChanged } from '@lib/firebase';

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

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

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

  return (
    &lt;AuthContext.Provider value={[user, userLoading]}&gt;
      {children}
    &lt;/AuthContext.Provider&gt;
  );
};

export const useAuth = () =&gt; useContext(AuthContext);
</code></pre>
<ol start="6">
<li>Update <code>pages/_app.js</code> to use <code>AuthProvider</code>:</li>
</ol>
<pre><code class="language-js">import { AuthProvider } from '@contexts/auth';
import '@styles/global.scss';

const App = ({ Component, pageProps }) =&gt; (
  &lt;AuthProvider&gt;
    &lt;Component {...pageProps} /&gt;
  &lt;/AuthProvider&gt;
);

export default App;
</code></pre>
<ol start="7">
<li>Restart your development server if it's running.</li>
<li>Make sure your home page loads without error.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding AuthContext&quot;
git push
</code></pre>
<h2>Check for an Authenticated User in CreatePage</h2>
<ol>
<li>Import <code>useAuth</code> in <code>pages/create.js</code>:</li>
</ol>
<pre><code class="language-jsx">import { useAuth } from '@contexts/auth';
</code></pre>
<ol start="2">
<li>Invoke it in the component after the <code>isLoading</code> variable and log the results.</li>
</ol>
<pre><code class="language-jsx">const [user, userLoading] = useAuth();
console.log(user, userLoading);
</code></pre>
<ol start="3">
<li>Visit <code>http://localhost:3000/create</code> in your browser.</li>
<li>You should see three logs in the console:</li>
</ol>
<pre><code>undefined true
null true
null false
</code></pre>
<p>The first shows the initial values of <code>user</code> and <code>userLoading</code> when we invoke <code>useAuth</code>. The second shows those values after the <code>callback</code> we pass into <code>onAuthStateChanged</code> has been invoked and <code>setUser</code> has been called. The third shows after <code>setUserLoading</code> has been called in the same <code>callback</code>. This is why we call <code>setUser</code> before <code>setUserLoading</code>, so we can ensure that everything is truly loaded before changing that state.</p>
<ol start="4">
<li>Redirect to 404 if no user and return null if user is loading, before the <code>handleChange</code> and <code>handleSubmit</code> functions are defined. This placement prevents us from unecessarily defining those two functions if we're not going to use them.</li>
</ol>
<pre><code class="language-jsx">if (userLoading) {
  return null;
}

if (!user &amp;&amp; typeof window !== 'undefined') {
  router.push('/404');
  return null;
}
</code></pre>
<ol start="5">
<li>Visit <code>http://localhost:3000/create</code> in your browser.</li>
<li>You should be redirected to the 404 page.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Requiring Authentication in CreatePage&quot;
git push
</code></pre>
<h2>Add a Page for Signing In</h2>
<ol>
<li>Add a new <code>signIn</code> function to <code>lib/firebase.js</code>:</li>
</ol>
<pre><code class="language-js">/*
Attempts to authenticate a user with a given email and password.
*/
export const signIn = async (email, password) =&gt; {
  initFirebase();

  return firebase.auth().signInWithEmailAndPassword(email, password);
};
</code></pre>
<ol start="2">
<li>Add <code>styles/signin.module.scss</code>:</li>
</ol>
<pre><code class="language-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;
    }
  }
}
</code></pre>
<ol start="3">
<li>Add <code>pages/signin.js</code>:</li>
</ol>
<pre><code class="language-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 = () =&gt; {
  const router = useRouter();
  const [user, userLoading] = useAuth();
  const [values, setValues] = useState({ email: '', password: '' });

  if (userLoading) {
    return &lt;h1&gt;Loading...&lt;/h1&gt;;
  }

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

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

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

  const handleSubmit = (e) =&gt; {
    e.preventDefault();

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

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

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

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

export default SignInPage;
</code></pre>
<ol start="4">
<li>Go to <code>http://localhost:3000/signin</code> in your browser.</li>
<li>Try logging in with the user credentials you created at the beginning of this post.</li>
<li>If successful, you should be sent to the home page.</li>
<li>Go to <code>http://localhost:3000/create</code> in your browser. You should not be redirected to the 404 page.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding SignInPage&quot;
git push
</code></pre>
<h2>Add a Sign Out Button to Layout</h2>
<ol>
<li>Add a new <code>signOut</code> function to <code>lib/firebase.js</code>:</li>
</ol>
<pre><code class="language-js">/*
Signs out the authenticated user.
*/
export const signOut = async () =&gt; {
  initFirebase();

  return firebase.auth().signOut();
};
</code></pre>
<ol start="2">
<li>Update the <code>Layout</code> component to check for a user and render a Sign Out button if there is one.</li>
</ol>
<pre><code class="language-jsx">import { signOut } from '@lib/firebase';
import { useAuth } from '@contexts/auth';
import styles from './Layout.module.scss';

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

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

export default Layout;
</code></pre>
<ol start="3">
<li>Update the <code>Layout</code> styles so the <code>&lt;nav&gt;</code> element uses Flexbox and the new button stands out from the blue bar.</li>
</ol>
<pre><code class="language-scss">.Layout {
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ...

    span {
      ...

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

  ...
}
</code></pre>
<ol start="4">
<li>Go to <code>http://localhost:3000/</code> in your browser.</li>
<li>In the blue bar at the top, you should see a white button with blue text that reads &quot;Sign Out&quot; like this:</li>
</ol>
<p><a href="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&amp;token=9d34e42d-945c-4ad2-bc3a-9161cc34bc9b"><img src="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&amp;token=9d34e42d-945c-4ad2-bc3a-9161cc34bc9b" alt="View of the Sign Out button." /></a></p>
<ol start="6">
<li>Click the Sign Out button and check that you can no longer access the create page at <code>http://localhost:3000/create</code>.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding Sign Out button to Layout&quot;
git push
</code></pre>
<ol start="8">
<li>Celebrate!!! You did it!!! &lt;span role=&quot;img&quot; aria-label=&quot;party popper emoji&quot;&gt;🎉&lt;/span&gt;</li>
</ol>


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

<p>Welcome to the third post in my new &quot;Build a Blog Site with Next.js and Firebase&quot; series! This series is pretty similar to a series I wrote in 2019: <a href="/series/react-firebase-blog">&quot;Build a React &amp; Firebase Blog Site&quot;</a>. 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!</p>
<ul>
<li><em><a href="/blog/nextjs-firebase-blog-01">Read Part 1 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-02">Read Part 2 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-04">Read Part 4 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-05">Read Part 5 of the series</a></em></li>
</ul>
<hr />
<h2>Create a Page Component for Each Post</h2>
<p>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 <a href="https://nextjs.org/docs/routing/dynamic-routes">Next.js Dynamic Routes</a>. We just need to make sure we name the file correctly. Let's create a page component that just displays the <code>slug</code> from the URL as a test.</p>
<ol>
<li>Add <code>post.module.scss</code> under the <code>styles</code> directory:</li>
</ol>
<pre><code class="language-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;
  }
}
</code></pre>
<ol start="2">
<li>Add a <code>post</code> directory to <code>pages</code></li>
<li>Add <code>[slug].js</code> under the <code>post</code> directory:</li>
</ol>
<pre><code class="language-jsx">import { useRouter } from 'next/router';
import styles from '@styles/post.module.scss';

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

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

export default PostPage;
</code></pre>
<ol start="4">
<li>Go to <code>https://localhost:3000/post/my-first-blog-post</code> in your browser</li>
<li>The page should look something like this:</li>
</ol>
<p><a href="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&amp;token=5fe24bde-e502-4fe8-af7c-8675261f2729"><img src="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&amp;token=5fe24bde-e502-4fe8-af7c-8675261f2729" alt="White webpage with black text that reads &quot;Hello, from post: my-first-blog-post!&quot;." /></a></p>
<ol start="6">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding basic PostPage component&quot;
git push
</code></pre>
<h2>Link to Each Post on the Home Page</h2>
<p>Now that we have the pages for each post dynamically generating, we can link to them on the home page.</p>
<ol>
<li>In <code>pages/index.js</code>, add this <code>&lt;a&gt;</code> element below the <code>&lt;p&gt;</code> where you set <code>dangerouslySetInnerHTML</code> with the post content:</li>
</ol>
<pre><code class="language-jsx">&lt;a href={`/post/${post.slug}`}&gt;Continue Reading&lt;/a&gt;
</code></pre>
<ol start="2">
<li>In <code>styles/index.module.scss</code>, add <code>margin-bottom: 16px;</code> to the <code>p</code> element.</li>
<li>Below that style, add one for the <code>a</code> that sets the <code>color</code> to <code>#1a73e8</code>.</li>
<li>The home page should now look something like this:</li>
</ol>
<p><a href="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&amp;token=0acd5569-1da6-4e58-82da-48fb1f5ccb64"><img src="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&amp;token=0acd5569-1da6-4e58-82da-48fb1f5ccb64" alt="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 &quot;Continue Reading&quot;." /></a></p>
<ol start="5">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding links to each post&quot;
git push
</code></pre>
<h2>Load and Render Posts by Slug</h2>
<p>Our <code>PostPage</code> 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 <code>PostPage</code> component to render those details nicely.</p>
<ol>
<li>Add a new <code>getPostBySlug</code> function to <code>lib/firebase.js</code> for getting the post from our Firebase Realtime Database:</li>
</ol>
<pre><code class="language-js">/*
Retrieves the data for a single post from a given slug.
*/
export const getPostBySlug = async (slug) =&gt; {
  initFirebase();

  return await firebase
    .database()
    .ref(`/posts/${slug}`)
    .once('value')
    .then((snapshot) =&gt; snapshot.val());
};
</code></pre>
<ol start="2">
<li>Import <code>getPostBySlug</code> at the top of <code>pages/post/[slug].js</code> (you can remove the <code>useRouter</code> import):</li>
</ol>
<pre><code class="language-jsx">import { getPostBySlug } from '@lib/firebase';
</code></pre>
<ol start="3">
<li>Right before <code>export default PostPage</code>, add <code>getServerSideProps</code> to <code>pages/post/[slug].js</code>.</li>
</ol>
<pre><code class="language-jsx">export async function getServerSideProps(context) {
  const post = await getPostBySlug(context.query.slug);

  return {
    props: {
      post,
    },
  };
}
</code></pre>
<ol start="4">
<li>Update the <code>PostPage</code> component to accept a <code>post</code> prop and render the post:</li>
</ol>
<pre><code class="language-jsx">const PostPage = ({ post }) =&gt; (
  &lt;div className={styles.PostPage}&gt;
    &lt;img src={post.coverImage} alt={post.coverImageAlt} /&gt;
    &lt;h1&gt;{post.title}&lt;/h1&gt;
    &lt;span&gt;Published {getFormattedDate(post.dateCreated)}&lt;/span&gt;
    &lt;p dangerouslySetInnerHTML={{ __html: post.content }}&gt;&lt;/p&gt;
  &lt;/div&gt;
);
</code></pre>
<ol start="5">
<li><code>PostPage</code> uses the same <code>getFormattedDate</code> function as the home page, so let's add a <code>utils.js</code> file under the <code>lib</code> directory and export the function from there. You will have to restart you development server after this step if it's running.</li>
</ol>
<pre><code class="language-js">export const getFormattedDate = (milliseconds) =&gt; {
  const formatOptions = {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    year: 'numeric',
    timeZone: 'UTC',
  };
  const date = new Date(milliseconds);
  return date.toLocaleDateString(undefined, formatOptions);
};
</code></pre>
<ol start="6">
<li>Import <code>getFormattedDate</code> in both <code>pages/index.js</code> and <code>pages/post/[slug].js</code>:</li>
</ol>
<pre><code class="language-jsx">import { getFormattedDate } from '@lib/utils';
</code></pre>
<ol start="7">
<li>If you go to <code>http://localhost:3000/post/my-second-blog-post</code> in your browser, the page should look like this:</li>
</ol>
<p><a href="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&amp;token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682"><img src="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&amp;token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682" alt="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." /></a></p>
<ol start="8">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Rendering posts in PostPage&quot;
git push
</code></pre>
<h2>Add Site Navigation and Semantic HTML</h2>
<h3>Add a Layout component</h3>
<p>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.</p>
<ol>
<li>Add a <code>components</code> directory at the root of your project.</li>
<li>Update <code>jsconfig.json</code> for the new <code>components</code> directory:</li>
</ol>
<pre><code class="language-json">{
  &quot;compilerOptions&quot;: {
    &quot;baseUrl&quot;: &quot;./&quot;,
    &quot;paths&quot;: {
      &quot;@components&quot;: [&quot;components&quot;],
      &quot;@lib/*&quot;: [&quot;lib/*&quot;],
      &quot;@styles/*&quot;: [&quot;styles/*&quot;]
    }
  }
}
</code></pre>
<ol start="3">
<li>Add an <code>index.js</code> file for exporting all components from the directory.</li>
<li>Add a <code>Layout</code> directory under the <code>components</code> directory.</li>
<li>Add <code>Layout.jsx</code> to <code>components/Layout</code>:</li>
</ol>
<pre><code class="language-jsx">const Layout = ({ children }) =&gt; &lt;div&gt;{children}&lt;/div&gt;;

export default Layout;
</code></pre>
<ol start="6">
<li>Update <code>components/index.js</code> to export Layout:</li>
</ol>
<pre><code class="language-jsx">export { default as Layout } from './Layout/Layout';
</code></pre>
<ol start="7">
<li>Import <code>Layout</code> into <code>pages/post/[slug].js</code>:</li>
</ol>
<pre><code class="language-jsx">import { Layout } from '@components';
</code></pre>
<ol start="8">
<li>Update <code>PostPage</code> so that the rendered contents are wrapped by the new <code>Layout</code> component:</li>
</ol>
<pre><code class="language-jsx">const PostPage = ({ post }) =&gt; (
  &lt;Layout&gt;
    &lt;div className={styles.PostPage}&gt;
      &lt;img src={post.coverImage} alt={post.coverImageAlt} /&gt;
      &lt;h1&gt;{post.title}&lt;/h1&gt;
      &lt;span&gt;Published {getFormattedDate(post.dateCreated)}&lt;/span&gt;
      &lt;p dangerouslySetInnerHTML={{ __html: post.content }}&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/Layout&gt;
);
</code></pre>
<ol start="9">
<li>Restart your development server if it's running.</li>
<li>If you go to <code>http://localhost:3000/post/my-second-blog-post</code> in your browser, the page should still look like this:</li>
</ol>
<p><a href="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&amp;token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682"><img src="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&amp;token=dfd51d27-3a21-4ae5-a50d-e0cf4b136682" alt="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." /></a></p>
<ol start="11">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding new Layout component&quot;
git push
</code></pre>
<h3>Add HTML landmarks to Layout</h3>
<ol>
<li>Add <code>Layout.module.scss</code> to <code>components/Layout</code>:</li>
</ol>
<pre><code class="language-SCSS">.Layout {
  nav {
    padding: 24px;
    background-color: #1a73e8;

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

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

  main {
    padding: 24px;
  }
}
</code></pre>
<ol start="2">
<li>Import the styles in <code>components/Layout/Layout.jsx</code>:</li>
</ol>
<pre><code class="language-jsx">import styles from './Layout.module.scss';
</code></pre>
<ol start="3">
<li>Add a <code>className</code> to the <code>&lt;div&gt;</code> in <code>Layout</code> and add two elements: <code>&lt;nav&gt;</code> and <code>&lt;main&gt;</code>.</li>
</ol>
<pre><code class="language-jsx">const Layout = ({ children }) =&gt; (
  &lt;div className={styles.Layout}&gt;
    &lt;nav&gt;
      &lt;span&gt;
        &lt;a href=&quot;/&quot;&gt;My Next.js Blog&lt;/a&gt;
      &lt;/span&gt;
    &lt;/nav&gt;
    &lt;main&gt;{children}&lt;/main&gt;
  &lt;/div&gt;
);
</code></pre>
<ol start="4">
<li>Go to <code>https://localhost:3000/post/my-second-blog-post</code> in your browser.</li>
<li>It should look something like this and you should be able to go to the home page with the new link at the top:</li>
</ol>
<p><a href="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&amp;token=dd59ce2b-4a3e-4ef0-a7c5-50b150548953"><img src="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&amp;token=dd59ce2b-4a3e-4ef0-a7c5-50b150548953" alt="The same webpage as before but with a blue bar at the top and a white link to the home page that reads &quot;My Next.js Blog&quot;." /></a></p>
<ol start="6">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding nav and link to home page to Layout&quot;
git push
</code></pre>
<h2>Consolidate Page Styles</h2>
<p>Take a look styles in <code>index.module.scss</code>, <code>create.module.scss</code>, and <code>post.module.scss</code>. You should notice that all three of them have the same <code>max-width</code>, <code>margin</code>, and <code>padding</code> CSS properties set and the same values for each. This will be one benefit of having a <code>Layout</code> component: It helps you consolidate your styles and avoid repetition.</p>
<p>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 <code>max-width</code> in this one place to do so. Let's remove these three properties from <code>index.module.scss</code>, <code>create.module.scss</code>, and <code>post.module.scss</code> and use the new <code>Layout</code> component on these pages.</p>
<ol>
<li>Import <code>Layout</code> in <code>pages/index.js</code> and <code>pages/create.js</code>:</li>
</ol>
<pre><code class="language-jsx">import { Layout } from '@components';
</code></pre>
<ol start="2">
<li>Wrap the rendered content in <code>pages/index.js</code> and <code>pages/create.js</code> with the opening and closing <code>Layout</code> tags.</li>
<li>Delete the <code>max-width</code>, <code>margin</code>, and <code>padding</code> from <code>index.module.scss</code>, <code>create.module.scss</code>, and <code>post.module.scss</code>.</li>
<li>Update the <code>main</code> styles in <code>components/Layout/Layout.module.scss</code> to handle <code>max-width</code>, <code>margin</code>, and <code>padding</code> for page content:</li>
</ol>
<pre><code class="language-scss">main {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}
</code></pre>
<ol start="5">
<li>All of your pages should have the same blue naviation bar at the top now.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Using Layout in all pages and consolidating styles&quot;
git push
</code></pre>
<h2>One last thing</h2>
<p>What if someone tries to go to a post that doesn't exist? Let's try it. Go to <code>https://localhost:3000/post/abcdefg</code> in your browser. You should see a Server Error error that says <code>&quot;Cannot read property 'coverImage' of null&quot;</code>. This is because the <code>PostPage</code> component is expecting its <code>post</code> prop to be defined. Since the post isn't found in the database, our <code>getPostBySlug</code> is returning <code>null</code>. So, the <code>post</code> object passed to <code>PostPage</code> is null and doesn't have any attributes we can access off of it.</p>
<ol>
<li>Import <code>useRouter</code> again in the <code>PostPage</code> component and check to see if <code>post</code> is defined. Redirect to <code>/404</code> if the post doesn't exist.</li>
</ol>
<pre><code class="language-jsx">const PostPage = ({ post }) =&gt; {
  const router = useRouter();

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

  return (
    &lt;Layout&gt;
      &lt;div className={styles.PostPage}&gt;
        &lt;img src={post.coverImage} alt={post.coverImageAlt} /&gt;
        &lt;h1&gt;{post.title}&lt;/h1&gt;
        &lt;span&gt;Published {getFormattedDate(post.dateCreated)}&lt;/span&gt;
        &lt;p dangerouslySetInnerHTML={{ __html: post.content }}&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  );
};
</code></pre>
<p>Uh oh! There's another Server Error: &quot;No router instance found. you should only use &quot;next/router&quot; inside the client side of your app.&quot; This is happening because this code is running on the server side of our app and the <code>router.push</code> method is not supported there. You can read more about it at the link mentioned in the error.</p>
<ol start="2">
<li>To fix it, let's add an additional check to our <code>if</code> statement:</li>
</ol>
<pre><code class="language-jsx">if (!post &amp;&amp; typeof window !== 'undefined') {
  router.push('/404');
  return;
}
</code></pre>
<p>If we run this, we still get a Server Error: &quot;Cannot read property 'coverImage' of null&quot;. The <code>if</code> statement we just added is mainly for the client-side and doesn't tell the server-side what to do if the <code>post</code> object is undefined.</p>
<ol start="3">
<li>Add one more <code>if</code> statement below the first one that just returns <code>null</code> if <code>post</code> isn't defined.</li>
</ol>
<pre><code class="language-jsx">const PostPage = ({ post }) =&gt; {
  const router = useRouter();

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

  if (!post) {
    return null;
  }

  return (
    &lt;Layout&gt;
      &lt;div className={styles.PostPage}&gt;
        &lt;img src={post.coverImage} alt={post.coverImageAlt} /&gt;
        &lt;h1&gt;{post.title}&lt;/h1&gt;
        &lt;span&gt;Published {getFormattedDate(post.dateCreated)}&lt;/span&gt;
        &lt;p dangerouslySetInnerHTML={{ __html: post.content }}&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  );
};
</code></pre>
<ol start="4">
<li>Check that you're redirected to a 404 page.</li>
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Redirecting to 404 if post doesn't exist&quot;
git push
</code></pre>
<ol start="6">
<li>Celebrate!!! You did it!!! &lt;span role=&quot;img&quot; aria-label=&quot;party popper emoji&quot;&gt;🎉&lt;/span&gt;</li>
</ol>


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

<p>Welcome to the second post in my new &quot;Build a Blog Site with Next.js and Firebase&quot; series! This series is pretty similar to a series I wrote in 2019: <a href="/series/react-firebase-blog">&quot;Build a React &amp; Firebase Blog Site&quot;</a>. 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!</p>
<ul>
<li><em><a href="/blog/nextjs-firebase-blog-01">Read Part 1 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-03">Read Part 3 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-04">Read Part 4 of the series</a></em></li>
<li><em><a href="/blog/nextjs-firebase-blog-05">Read Part 5 of the series</a></em></li>
</ul>
<hr />
<h2>Add a Page for Creating Posts</h2>
<p>First, let's add styles and a minimal component for our new <code>CreatePage</code> component.</p>
<ol>
<li>Add <code>create.module.scss</code> in the <code>styles</code> directory:</li>
</ol>
<pre><code class="language-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;
    }
  }
}
</code></pre>
<ol start="2">
<li>Add <code>create.js</code> in the <code>pages</code> directory:</li>
</ol>
<pre><code class="language-jsx">import styles from './create.module.scss';

const CreatePage = () =&gt; (
  &lt;div styles={className.CreatePage}&gt;
    &lt;h1&gt;Hello, from CreatePage!&lt;/h1&gt;
  &lt;/div&gt;
);

export default CreatePage;
</code></pre>
<ol start="3">
<li>Go to <a href="http://localhost:3000/create">http://localhost:3000/create</a> 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:</li>
</ol>
<p><a href="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&amp;token=fb6d2174-34f6-4cc6-bf74-f23bbac592f9"><img src="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&amp;token=fb6d2174-34f6-4cc6-bf74-f23bbac592f9" alt="A white webpage that reads &quot;Hello from CreatePage!&quot; in black text." /></a></p>
<ol start="4">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding basic CreatePage component&quot;
git push
</code></pre>
<h2>Make a Form for Describing Posts</h2>
<p>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 &quot;shape&quot; 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):</p>
<ul>
<li><code>title</code></li>
<li><code>slug</code></li>
<li><code>dateCreated</code></li>
<li><code>coverImage</code></li>
<li><code>coverImageAlt</code></li>
<li><code>content</code></li>
</ul>
<p>Of all of these attributes, there's one we can auto-generate when that &quot;Create&quot; button is clicked and don't need an input for: <code>dateCreated</code>. The rest need to be text <code>&lt;input&gt;</code>s and the <code>content</code> attribute will need a <code>&lt;textarea&gt;</code> 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 <code>CreatePage</code>.</p>
<ol>
<li>Add styles for the new elements we're adding to the end of <code>styles/global.scss</code>:</li>
</ol>
<pre><code class="language-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;
}
</code></pre>
<ol start="2">
<li>Add some event handler functions and a <code>&lt;form&gt;</code> with the <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;button&gt;</code> elements we need to <code>CreatePage</code>:</li>
</ol>
<pre><code class="language-jsx">import { useState } from 'react';
import styles from '@styles/create.module.scss';

const CreatePage = () =&gt; {
  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) =&gt; {
    const id = e.target.id;
    const newValue = e.target.value;

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

  /*
  This function is passed to the &lt;form&gt; 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 &lt;button&gt; at the
  end of the form because it has type=&quot;submit&quot;. This allows us to click
  to submit the form or press the Enter key to submit it.
  */
  const handleSubmit = (e) =&gt; {
    // This prevents the default functionality of submitting a form
    e.preventDefault();

    console.log(formValues);
  };

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

export default CreatePage;
</code></pre>
<ol start="3">
<li>Enter some data into each of the controls. Here's a list of what I'm entering as an example:</li>
</ol>
<ul>
<li><code>title</code>: My Third Blog Post</li>
<li><code>slug</code>: my-third-blog-post</li>
<li><code>coverImage</code>: https://placekitten.com/g/700/300</li>
<li><code>coverImageAlt</code>: A random kitten from PlaceKitten.com.</li>
<li><code>content</code>: Check me out! I'm writing my third blog post on a site I created. I'm so proud of myself!</li>
</ul>
<ol start="4">
<li>Click the &quot;Create&quot; button.</li>
<li>Check the dev tools console.</li>
<li>Your page and console should look like this:</li>
</ol>
<p><a href="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&amp;token=55cb793a-714e-4664-b67e-c2d8ddd3495a"><img src="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&amp;token=55cb793a-714e-4664-b67e-c2d8ddd3495a" alt="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." /></a></p>
<ol start="7">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding form and controls to CreatePage&quot;
git push
</code></pre>
<h2>Write a Firebase Create Function</h2>
<p>Our <code>CreatePage</code> component captures all the data we need to create a post. Now, we need to do something with that data.</p>
<ol>
<li>Add a <code>createPost</code> function to <code>lib/firebase.js</code>:</li>
</ol>
<pre><code class="language-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) =&gt; {
  initFirebase();

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

  return firebase.database().ref(`/posts/${post.slug}`).set(post);
};
</code></pre>
<ol start="2">
<li>Update the <code>CreatePage</code> component for fully creating posts. The code after this list of changes shows what your component should look like after making the updates.</li>
</ol>
<ul>
<li>Import <code>useRouter</code> from <code>next/router</code> after the <code>useState</code> import.</li>
<li>Import <code>createPost</code> from <code>@lib/firebase</code> after the <code>useRouter</code> import.</li>
<li>Instantiate the <code>router</code> at the top of the <code>CreatePage</code> function.</li>
<li>Add an <code>isLoading</code> state after the <code>formValues</code> instantiation.</li>
<li>Update <code>handleSubmit</code> to check for missing values, set the <code>isLoading</code> state, and call <code>createPost</code>.</li>
<li>Update the submit <code>&lt;button&gt;</code> to use <code>isLoading</code>.</li>
</ul>
<pre><code class="language-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 = () =&gt; {
  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) =&gt; {
    const id = e.target.id;
    const newValue = e.target.value;

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

  /*
  This function is passed to the &lt;form&gt; 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 &lt;button&gt; at the
  end of the form because it has type=&quot;submit&quot;. This allows us to click
  to submit the form or press the Enter key to submit it.
  */
  const handleSubmit = (e) =&gt; {
    // 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]) =&gt; {
      if (!value) {
        missingValues.push(key);
      }
    });

    // Alert and prevent the post from being created if there are missing values.
    if (missingValues.length &gt; 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(() =&gt; {
        // Update the isLoading state and navigate to the home page.
        setIsLoading(false);
        router.push('/');
      })
      .catch((err) =&gt; {
        // Alert the error and update the isLoading state.
        alert(err);
        setIsLoading(false);
      });
  };

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

export default CreatePage;
</code></pre>
<ol start="3">
<li>Fill out the form with data such as this:</li>
</ol>
<ul>
<li><code>title</code>: My Third Blog Post</li>
<li><code>slug</code>: my-third-blog-post</li>
<li><code>coverImage</code>: https://placekitten.com/g/700/300</li>
<li><code>coverImageAlt</code>: A random kitten from PlaceKitten.com.</li>
<li><code>content</code>: Check me out! I'm writing my third blog post on a site I created. I'm so proud of myself!</li>
</ul>
<ol start="4">
<li>Click the &quot;Create&quot; button.</li>
<li>When it's finished loading, you should see the home page and your new post at the top of the list.</li>
</ol>
<p><a href="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&amp;token=b2c47ab7-43e9-42bd-9454-ed33f8a8d4e2"><img src="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&amp;token=b2c47ab7-43e9-42bd-9454-ed33f8a8d4e2" alt="Window showing the home page and list of blog posts." /></a></p>
<ol start="6">
<li>Commit and push your work to your repository:</li>
</ol>
<pre><code>git add .
git commit -m &quot;Adding createPost function and using it in CreatePage&quot;
git push
</code></pre>
<ol start="7">
<li>Celebrate!!! You did it!!! &lt;span role=&quot;img&quot; aria-label=&quot;party popper emoji&quot;&gt;🎉&lt;/span&gt;</li>
</ol>
<p>Don't forget that <a href="/nextjs-firebase-blog-01">last time</a>, we <a href="/nextjs-firebase-blog-01#deploy-to-vercel">deployed our site to Vercel</a>. With every <code>git push</code> 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. :)</p>


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

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

The first accessible React component in the live series is a breadcrumb.

Build an Accessible React Component

Build an Accessible Breadcrumb Component&mdash;Part 1 in the Accessible React Component Series

<h2>First of all, Thank you so much! 🎉</h2>
<p>The &quot;Build a React &amp; Firebase Blog Site&quot; live stream was fantastic! I now have two posts to add to my <a href="https://dev.to/ashleemboyer/build-a-react-firebase-blog-site-part-1-4gn0">&quot;Build a React &amp; Firebase Blog Site&quot; Series</a> and am considering packaging the series up in an ebook format! You can watch the video on YouTube!</p>
&lt;iframe width=&quot;100%&quot; height=&quot;400px&quot; src=&quot;https://www.youtube.com/embed/UA0-DWfIuts&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<h2>What's this about? 🤔</h2>
<p>In the meantime, I've been thinking about topics for upcoming live coding streams and have decided to make a whole series about building accessible React components. I have GitHub repository with a couple of things in it already, but needed a break from all things outside of work for a while. What better way to pick things back up than with a live series to add to the repository?</p>
<h2>Neat! How's it going to work? ✨</h2>
<p>Here's the idea: we'll pick a random widget from the <a href="https://www.w3.org/TR/wai-aria-practices">WAI-ARIA Authoring Practices</a> with an on-screen wheel, then build it in React! If a really complex component is chosen, it might take an extra stream to finish it, but we'll walk through the whole thing from start to finish!</p>
<h2>Let's gooo! 🏃‍♀️</h2>
<p>To get notified when I go live on stream, you can <a href="https://twitch.tv/ashleemboyer">follow me on Twitch</a>. If you can't catch the stream live, it'll still be available afterwards to re-watch! I also plan on uploading my videos to YouTube since they don't stay on Twitch forever. I'll also add to the bottom of this post as we make it though the series so everything is nicely grouped together.</p>


This is where you can find all the details for my accessible React component live coding series.

Build an Accessible React Component&mdash;The Live Series

<p>We've reached the third part of our React &amp; Firebase series. In <a href="https://ashleemboyer.com/react-firebase-blog-01">part one</a>, we learned how to set everything up. <a href="https://ashleemboyer.com/react-firebase-blog-02">Last time</a>, 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.</p>
<p>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, &amp; 5 from <a href="https://ashleemboyer.com/react-firebase-blog-01">the first part</a> before you go any further.</p>
<h2>1. Clone the (Part 3) Starter Code [Optional]</h2>
<p>Skip this step if you've successfully completed Part 2. Otherwise, you can clone the code by running the following command in the terminal:</p>
<pre><code>git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-3.git
</code></pre>
<p>You'll need to change one file before continuing: <code>src/firebase.js</code>. If you open it, you'll see the following <code>config</code> constant:</p>
<pre><code>const config = {
  apiKey: &quot;&lt;YOUR-API-KEY&gt;&quot;,
  authDomain: &quot;&lt;YOUR-AUTH-DOMAIN&gt;&quot;,
  databaseURL: &quot;&lt;YOUR-DATABASE-URL&gt;&quot;,
  projectId: &quot;&lt;YOUR-PROJECT-ID&gt;&quot;,
  storageBucket: &quot;&lt;YOUR-STORAGE-BUCKET&gt;&quot;,
  messagingSenderId: &quot;&lt;YOUR-MESSAGE-SENDER-ID&gt;&quot;,
  appId: &quot;&lt;YOUR-APP-ID&gt;&quot;
};
</code></pre>
<p>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 <a href="https://console.firebase.google.com">Firebase console</a>. Scroll down to the &quot;Firebase SDK snippet&quot; under &quot;Your apps&quot; and copy the attributes from what they're calling <code>firebaseConfig</code>. Replace the attributes in your <code>config</code> constant with these values.</p>
<p>Now you can run <code>npm install</code> and then <code>npm run start</code> to see your project in a browser.</p>
<h2>2. Inspect the <code>Post</code> Component</h2>
<p>You can find this component in the <code>src/pages/post.js</code> file. Let's take a look at what it does right now.</p>
<p>First, it grabs the slug from the URL using the <code>Router</code> we have set up in <code>src/App.js</code>. Components passed in to <code>Route</code> components within a <code>Router</code> have a <code>match</code> prop sent to them. There are other ways this prop is sent to components, and you can read more about that <a href="https://reacttraining.com/react-router/web/api/match">over here</a>.</p>
<p>Next, we have a <code>postSlugs</code> 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.</p>
<p>Next, we're checking if the <code>slug</code> in the URL bar is one of the <code>postSlugs</code>. If it isn't, then the user is trying to see a post that doesn't actually exist. So, we return a <code>Redirect</code> to our <code>404</code> component. You can read more about the <code>Redirect</code> <a href="https://reacttraining.com/react-router/web/api/Redirect">over here</a>.</p>
<p>Finally, we have our return statement. Right now, it returns the same thing for every valid post <code>slug</code>. Instead, we want to show the real blog post content that we have stored in Firebase.</p>
<h2>3. Connect the <code>Post</code> Component to Firebase</h2>
<p>First, let's add import our <code>getFirebase</code> function so we can try to read from the database. While we're at it, we should also import <code>useState</code> to help manage a couple of things.</p>
<pre><code>import React, { useState } from &quot;react&quot;;

import { getFirebase } from &quot;../firebase&quot;;
</code></pre>
<p>Next, let's think about how what we want to manage with <code>useState</code>. The first thing that comes to mind is a <code>loading</code> 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 <code>currentPost</code> that we're trying to read from the database. Replace the <code>postSlugs</code> line with the following two lines of code:</p>
<pre><code>const [loading, setLoading] = useState(true);
const [currentPost, setCurrentPost] = useState();
</code></pre>
<p>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:</p>
<pre><code>if (loading) {
  return &lt;h1&gt;Loading...&lt;/h1&gt;;
}
</code></pre>
<p>Our database call needs to go right before this <code>if</code> statement, however. If we place it after, it will never be reached because the <code>if</code> statement is making the code return early. Here's what we'll add after our calls to <code>useState</code> and before the <code>if</code> statement we just wrote:</p>
<pre><code>if (loading &amp;&amp; !currentPost) {
  getFirebase()
    .database()
    .ref()
    .child(`/posts/${slug}`)
    .once(&quot;value&quot;)
    .then(snapshot =&gt; {
      if (snapshot.val()) {
        setCurrentPost(snapshot.val());
      }
      setLoading(false);
    });
}
</code></pre>
<p>Let's update our check on whether a post exists or not. Update <code>postDoesNotExist</code> to the following:</p>
<pre><code>const postDoesNotExist = !currentPost;
</code></pre>
<p>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.</p>
<ol>
<li>On first load: <code>loading</code> is true and <code>setCurrentPost</code> is undefined, so we go inside of the <code>if</code> statement. Once we make it into the <code>then</code>, if <code>snapshot.val()</code> returns an object (it'll be null if no post exists with the given <code>slug</code>), we call <code>setCurrentPost</code>, making <code>currentPost</code> no longer undefined.</li>
<li>After <code>setCurrentPost</code> call: Making this call will re-render the component. We reach our <code>if (loading &amp;&amp; !currentPost)</code> statement again. Since <code>currentPost</code> 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 <code>if (loading)</code> statement. <code>loading</code> is still true, so the component returns some text and doesn't do anything else.</li>
<li>After <code>setLoading</code> call: Making this call will re-render the component. <code>loading</code> is now false and <code>currentPost</code> might be undefined or an object. That's where the <code>if (postDoesNotExist)</code> check comes in. If we didn't get a post back from the database, we return a <code>Redirect</code>, like before. Otherwise, we continue on to our final <code>return</code> where we show the post.</li>
</ol>
<p><em>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.</em></p>
<p>Here's how I'm displaying posts:</p>
<pre><code>return (
  &lt;&gt;
    &lt;img src={currentPost.coverImage} alt={currentPost.coverImageAlt}&gt;
    &lt;h1&gt;{currentPost.title}&lt;/h1&gt;
    &lt;em&gt;{currentPost.datePretty}&lt;/em&gt;
    &lt;p dangerouslySetInnerHTML={{ __html: currentPost.content }}&gt;&lt;/p&gt;
  &lt;/img&gt;
);
</code></pre>
<p>I also added a <code>12px</code> margin to the top of <code>&lt;p&gt;</code> elements in <code>src/index.js</code>.</p>
<p>Now, when you click a &quot;Continue reading...&quot; link or manually navigate to one of your posts, you should see something like this:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-03%2Fpost.png?alt=media&amp;token=4a9abd6a-9549-467f-a473-ff86ae47357a" alt="Screenshot of a single blog post's page." /></p>
<p>Please <a href="mailto:hello@ashleemboyer.com">send me an email</a> or <a href="https://twitter.com/ashleemboyer">a Twitter DM</a> if you have any questions or concerns. I love hearing from you! 😊</p>


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

<p>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 <a href="https://ashleemboyer.com/react-firebase-blog-01">the first post in the series</a>, 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:</p>
<ul>
<li>Step 1: Sign up for Firebase (if you don't have an account already)</li>
<li>Step 2: Create a project</li>
<li>Step 5: Add Data to the Database</li>
</ul>
<p>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.</p>
<h2>1. Clone the (Part 2) Starter Code [Optional]</h2>
<p>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:</p>
<pre><code>git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-2.git
</code></pre>
<p>You'll need to change one file before continuing: <code>src/firebase.js</code>. If you open it, you'll see the following <code>config</code> constant:</p>
<pre><code>const config = {
  apiKey: &quot;&lt;YOUR-API-KEY&gt;&quot;,
  authDomain: &quot;&lt;YOUR-AUTH-DOMAIN&gt;&quot;,
  databaseURL: &quot;&lt;YOUR-DATABASE-URL&gt;&quot;,
  projectId: &quot;&lt;YOUR-PROJECT-ID&gt;&quot;,
  storageBucket: &quot;&lt;YOUR-STORAGE-BUCKET&gt;&quot;,
  messagingSenderId: &quot;&lt;YOUR-MESSAGE-SENDER-ID&gt;&quot;,
  appId: &quot;&lt;YOUR-APP-ID&gt;&quot;
};
</code></pre>
<p>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 <a href="https://console.firebase.google.com">Firebase console</a>. Scroll down to the &quot;Firebase SDK snippet&quot; under &quot;Your apps&quot; and copy the attributes from what they're calling <code>firebaseConfig</code>. Replace the attributes in your <code>config</code> constant with these values.</p>
<p>Now you can run <code>npm install</code> and then <code>npm run start</code> to see your project in a browser.</p>
<h2>2. Add a Page for Creating Posts</h2>
<p>To get started on implementing a &quot;Create Post&quot; feature, let's first make a page we'll use to create posts. Add a <code>create.js</code> file in <code>src/pages</code>. We're going to keep it really simple for now to make sure everything is still working.</p>
<blockquote>
<p>Developing code is most easy when you take incremental steps and check your work along the way.</p>
</blockquote>
<p>Our <code>Create</code> component will give a friendly, &quot;Hello,&quot; for now.</p>
<pre><code>import React from &quot;react&quot;;

const Create = () =&gt; {
  return &lt;h1&gt;Hello, from Create!&lt;/h1&gt;;
};

export default Create;
</code></pre>
<p>Try navigating to the <code>/create</code> page. Uh, oh... the page isn't found?</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2F404.png?alt=media&amp;token=4665d673-fc43-4f64-ab14-4d5b8bf7ec9e" alt="The 404 page." /></p>
<p>No worries! We just need to add a <code>Route</code> for our new page in <code>src/App.js</code>. First add an import for the <code>Create</code> component:</p>
<pre><code>import Create from &quot;./pages/create&quot;;
</code></pre>
<p>Then, add the following <code>Route</code> below the one for the <code>/</code> path:</p>
<pre><code>&lt;Route path=&quot;/create&quot; component={Create} /&gt;
</code></pre>
<p>The new create page should be working now!</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-hello.png?alt=media&amp;token=a4a5a0ac-005e-448c-8493-450a60f1f5e6" alt="The create page." /></p>
<h2>3. Make Inputs for Describing Posts</h2>
<p>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:</p>
<ul>
<li>title</li>
<li>slug</li>
<li>date</li>
<li>coverImage</li>
<li>coverImageAlt</li>
<li>content</li>
</ul>
<p>Consider these two questions: Which of these attributes do we need to create an <code>&lt;input&gt;</code> for? Which ones can we automatically generate with some additional code? Well, ...</p>
<p>If I were making this blog site for a client, I would auto-generate the <code>slug</code> and the <code>date</code>. 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 <code>coverImage</code>, but that's also a little more complex than I'd like to take this post.</p>
<p>So, <code>date</code> is the only thing we're going to auto-generate. We'll have inputs for everything except <code>content</code>, which will get a <code>&lt;textarea&gt;</code>. Let's add all of those to our component and handle their values with <code>useState</code>. Your <code>src/pages/create.js</code> file should look like this:</p>
<p><em>If this seems like a lot of redundant code to you, good catch! (And I'm sorry. 😅) We'll fix that in a &quot;going further&quot; post.</em></p>
<pre><code>import React, { useState } from &quot;react&quot;;

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

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

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

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

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

        &lt;label style={labelStyles} htmlFor=&quot;slug-field&quot;&gt;
          Slug
        &lt;/label&gt;
        &lt;input
          style={inputStyles}
          id=&quot;slug-field&quot;
          type=&quot;text&quot;
          value={slug}
          onChange={({ target: { value } }) =&gt; {
            setSlug(value);
          }}
        /&gt;

        &lt;label style={labelStyles} htmlFor=&quot;cover-image-field&quot;&gt;
          Cover image
        &lt;/label&gt;
        &lt;input
          style={inputStyles}
          id=&quot;cover-image-field&quot;
          type=&quot;text&quot;
          value={coverImage}
          onChange={({ target: { value } }) =&gt; {
            setCoverImage(value);
          }}
        /&gt;

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

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

export default Create;
</code></pre>
<p>Here's what your page should look like now:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-screen.png?alt=media&amp;token=24abdd3c-da90-4438-a488-7c6fb95112d1" alt="The create page with inputs." /></p>
<p>Briefly fill in all of these fields and see what happens when you click the &quot;Create&quot; 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 (<em>click to expand</em>):</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-values-logged.png?alt=media&amp;token=2de7263e-f573-4a4c-85a4-050ab479fee1" alt="The create page with filled inputs and their values logged to the console." /></p>
<h2>4. Write a Create Function</h2>
<p>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 <code>getFirebase</code> function from <code>src/firebase.js</code>.</p>
<pre><code>import { getFirebase } from &quot;../firebase&quot;;
</code></pre>
<p>Now, add the <code>generateDate()</code> function, update the <code>createPost</code> function, and destructure the <code>history</code> prop from the <code>Create</code> component params:</p>
<pre><code>const generateDate = () =&gt; {
  const now = new Date();
  const options = { month: &quot;long&quot;, day: &quot;numeric&quot;, year: &quot;numeric&quot; };

  const year = now.getFullYear();

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

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

  return {
    formatted: `${year}-${month}-${day}`,             // used for sorting
    pretty: now.toLocaleDateString(&quot;en-US&quot;, options)  // used for displaying
  };
};
</code></pre>
<pre><code>const createPost = () =&gt; {
  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(() =&gt; history.push(`/`));
};
</code></pre>
<pre><code>const Create = ({ history }) =&gt; {
  ...
}
</code></pre>
<p>Fill in your inputs like we did a few minutes ago, click &quot;Create post&quot;, and you should be brought to the home page with your new post at the very top!</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fnew-post.png?alt=media&amp;token=85aa1f65-6be1-430f-badc-9490b5e6c66d" alt="The home page with the new post listed first." /></p>
<h2>5. Wrapping Up</h2>
<p>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. 💪</p>
<p>If come across any issues or questions, <a href="mailto:hello@ashleemboyer.com">send me an email</a> or <a href="https://twitter.com/ashleemboyer">DM me on Twitter</a>! Catch you again tomorrow. 😊</p>


Build a React & Firebase Blog Site Part 2

<p>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.</p>
<p>At the end of this post, you'll have learned how to connect your app to Firebase and pull some data from <a href="https://firebase.google.com/docs/database">Firebase's Realtime Database</a>. Next time, we'll start setting up our CRUD functions with a &quot;Create Post&quot; 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.</p>
<p>Ready to get started? :)</p>
<h2>1. Sign up for Firebase</h2>
<p>This one is easy! Head over to <a href="https://firebase.google.com/">Firebase's website</a> and click the &quot;Get started&quot; button. The page looks like this:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-home.png?alt=media&amp;token=44402b1f-339f-4343-817d-952bc6c3bbe4" alt="Firebase's home page with a &quot;Get started&quot; button." /></p>
<p>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:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-welcome.png?alt=media&amp;token=8433b1fc-49ff-42a3-8bb1-21e52cb966be" alt="The Firebase console where a project can be created." /></p>
<h2>2. Create a Project</h2>
<p>Click the &quot;Create a project&quot; button to begin the three step process. First, you'll be prompted for a project name. I'm naming my project <code>react-firebase-blog</code>. You can change your project ID if you want, but going with the automatically generated one is fine too.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-01.png?alt=media&amp;token=c238d4b6-3580-4f3d-9a92-4651cd01662d" alt="Step 1 of the process." /></p>
<p>Step 2 asks us if we want to set up Google Analytics for the project. I'm selecting &quot;Not right now&quot;. If you choose this option, the process ends here. Otherwise, there's another step</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-02.png?alt=media&amp;token=fb748ae2-44fb-4626-ada7-f2b31e73a510" alt="Step 2 of the process." /></p>
<p>Click &quot;Create project&quot; and you'll be brought to a loading screen. When it says, &quot;Your new project is ready,&quot; click the &quot;Continue&quot; button.</p>
&lt;p style=&quot;text-align:center;&quot;&gt;
  &lt;img src=&quot;https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-ready.png?alt=media&amp;token=3f419470-28e2-4a07-8b36-92b32f8a5b3a&quot; /&gt;
&lt;/p&gt;
<h2>3. Clone the Starter Code</h2>
<p>You can clone the starter code by running the following command in a terminal:</p>
<pre><code>git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git
</code></pre>
<p>Let's see what we've got! Go ahead and get the project rolling by changing into the <code>react-firebase-blog-starter</code> directory, running <code>npm install</code>, and finally running <code>npm run start</code>. Here's what you should see:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fstarter-site.png?alt=media&amp;token=a0e21d1e-a951-4871-a98f-a9c42f588697" alt="" /></p>
<p>Hooray! Go ahead and explore the project a little. I'll highlight a few areas for you to begin.</p>
<ol>
<li>
<p><code>src/App.js</code></p>
<p>We have 4 <code>Routes</code>: 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 <code>Post</code> component (<code>src/pages/post.js</code>). Let's go ahead and look at that one.</p>
</li>
<li>
<p><code>src/pages/post.js</code></p>
<p>Because we're using a Router in <code>src/App.js</code> (comes from <code>react-router-dom</code>), the components we name in <code>Route</code> elements will have a <a href="https://reacttraining.com/react-router/web/api/match"><code>match</code></a> passed into their props. We can get the slug for a post from the URL bar with <code>match.params.slug</code>, then compare that to a list of slugs we support on the site. Those are hard-coded into a <code>postSlugs</code> variable for now. If the slug does not exist, we return a <code>Redirect</code> to our 404 page. Otherwise, we'll display the correct post.</p>
</li>
<li>
<p><code>src/pages/home.js</code></p>
<p>First, you'll se the <code>blogPosts</code> variable. We're hard-coding our posts until we connect our app to Firebase. All this page does is return a <code>section</code> element for every blog post in the <code>blogPosts</code> array. You shouldn't need to change anything after the <code>return</code> statement as we make our way through this series.</p>
</li>
</ol>
<h2>4. Connect Firebase to the application</h2>
<p>First, install the <a href="https://www.npmjs.com/package/firebase"><code>firebase</code> package</a> by running <code>npm install firebase</code> in the root directory of the project.</p>
<p>Now, create a JavaScript file in the <code>src</code> directory of the project and call it <code>firebase.js</code>. This is where we'll define our Firebase configs and initialize the Firebase objects.</p>
<p>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 &quot;Project settings&quot; from the menu. Scroll down to the &quot;Your apps&quot; section of the page. It's probably at the bottom. It should say, &quot;There are no apps in your project.&quot;</p>
&lt;p style=&quot;text-align:center;&quot;&gt;
  &lt;img alt=&quot;Screenshot of the 'Your apps' section of the project settings.&quot; src=&quot;https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fproject-settings.png?alt=media&amp;token=63cb601f-0eb7-49eb-a7c9-dbb5f6bf53ac&quot; /&gt;
&lt;/p&gt;
<p>Click the circle that looks like <code>&lt;/&gt;</code> in order to add Firebase to a web app. You'll be prompted for the App's nickname. I'm calling mine <code>React Firebase Blog</code>.</p>
&lt;p style=&quot;text-align:center;&quot;&gt;
  &lt;img alt=&quot;Screenshot of the prompt for the app's nickname.&quot; src=&quot;https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fapp-nickname.png?alt=media&amp;token=513f98b4-37ef-42aa-b45f-f793e5e37c6c&quot; /&gt;
&lt;/p&gt;
<p>Click the &quot;Register app&quot; button, and after the page finishes loading, you'll see some HTML code that has a variable called <code>firebaseConfig</code>. Copy the JSON attributes from that variable and hold on to them for our <code>firebase.json</code> file. Click the &quot;Continue to console&quot; 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 &quot;Your apps&quot; section that now has our app listed.</p>
<p>Let's go back to our <code>firebase.js</code>. Have your config data ready and plug it in to the following code:</p>
<pre><code>import firebase from &quot;firebase/app&quot;;
import database from &quot;firebase/database&quot;;

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

let firebaseCache;

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

  firebase.initializeApp(config);
  firebaseCache = firebase;
  return firebase;
};
</code></pre>
<p>The <code>getFirebase()</code> function will ensure we only call <code>initializeApp</code> one time.</p>
<h2>5. Add Data to the Database</h2>
<p>We can't read any data from our database until we actually add to it! Go back to your Firebase project and click the &quot;Database&quot; option under the &quot;Develop&quot; heading in the sidebar. You'll have to scroll down the page a little until you find the &quot;Realtime Database&quot; section.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Frealtime-database.png?alt=media&amp;token=2bc78aa3-e902-46fd-a775-95042cd5cc0e" alt="Screenshot of the Realtime Database section." /></p>
<p>Click the &quot;Create database&quot; button within this section. You'll see a modal come up asking you about the security rules for your database.</p>
&lt;p style=&quot;text-align:center;&quot;&gt;
  &lt;img alt=&quot;The 'security rules' modal.&quot; src=&quot;https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fsecurity-rules.png?alt=media&amp;token=fbd9e6fc-63ac-41d3-b8c9-779a9224c598&quot; /&gt;
&lt;/p&gt;
<p>Select &quot;Start in <strong>test mode</strong>&quot; and click the &quot;Enable&quot; button. Your database will be empty and read something like:</p>
<pre><code>&lt;YOUR-PROJECT-ID&gt;: null
</code></pre>
<p>If you didn't already know, the Realtime Database is just a JSON object. You can read more about that <a href="https://firebase.google.com/docs/database">here</a>.</p>
<p>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 &quot;Import JSON&quot; to get to the file upload. Browse for your file, and then click the &quot;Import&quot; button.</p>
<p>Now you should have some data attributes you can expand and explore!</p>
&lt;p style=&quot;text-align:center;&quot;&gt;
  &lt;img alt=&quot;The data imported into the Realtime Database.&quot; src=&quot;https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fdata.png?alt=media&amp;token=70461f67-df46-41b4-b15a-c53fc343d3b4&quot; /&gt;
&lt;/p&gt;
<h2>6. Read from the Database</h2>
<p>Finally! The moment we've all been waiting for. Let's head over to <code>src/home.js</code> and see if we can get some stuff from the database!</p>
<p>First, add some imports to the top of the file:</p>
<pre><code>// You only need to add the `{ useState }` portion here.
import React, { useState } from &quot;react&quot;;

// This is new.
import { getFirebase } from &quot;../firebase&quot;;
</code></pre>
<p>Now, let's get <code>blogPosts</code> into a state and try to read them from the database. You can read more about the <code>useState</code> hook over <a href="https://reactjs.org/docs/hooks-state.html">here</a>. We're also going to add a <code>loading</code> state so we can easily do two things:</p>
<ol>
<li>Make sure we only call <code>getFirebase</code> once</li>
<li>Show the user a loading screen while we wait for data</li>
</ol>
<p>Replace the <code>blogPosts</code> constant with the following code:</p>
<pre><code>const [loading, setLoading] = useState(true);
const [blogPosts, setBlogPosts] = useState([]);

if (loading &amp;&amp; !blogPosts.length) {
  getFirebase()
    .database()
    .ref(&quot;/posts&quot;)
    .orderByChild(&quot;dateFormatted&quot;)
    .once(&quot;value&quot;)
    .then(snapshot =&gt; {
      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 &lt;h1&gt;Loading...&lt;/h1&gt;;
}
</code></pre>
<p>Tada! You should see the exact same thing we had before. 🎉</p>
<h2>7. Wrapping Up</h2>
<p>There was a ton of stuff here. If you have any questions or concerned, please <a href="mailto:hello@ashleemboyer.com">send me an email</a> or <a href="https://twitter.com/ashleemboyer">DM me on Twitter</a>! 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 <a href="https://firebase.google.com/docs/database/web/start">Firebase documentation</a>.</p>


Posts Related to the "react" Tag

She's written 12 posts