fireship-io / next-firebase-course

Next.js + Firebase - The Full Course

Next.js + Firebase - The Full Course

• Live Demo
• Enroll in the Course

Become an expert at React, Next.js, and Firebase by building a social blogging community from scratch.

Build a complex webapp inspired by sites Dev.to and Medium, featuring...

• 👨‍🎤 Custom Firebase usernames
• 📰 Bot-friendly content (SEO)
• 🦾 Advanced SSR, SSG, and ISR techniques
• 🔥 Firestore CRUD and data modeling
• ⚛️ Reactive forms with react-hook-form
• 📂 Image file uploads
• 💞 Realtime hearts
• 🚀 Security & Deployment

next-firebase-course's Issues

weird flickering issue

Issue

when on /enter page and the state of user auth changes

solution

provide a loading state

Issue with Navbar

I've been unable to get the Navbar component to work once I add the React Context. I get the following error message:

I've tried to refactor the code many ways but still getting a similar message.

This is my latest version:

import Link from 'next/link';
import React from 'react';
import { useContext } from "react";
import { UserContext } from "../lib/context";

const { user, username } = useContext(UserContext)

function LoggedIn() {

    return (
        <>
            <li className='push-left'>
                <Link href="/admin">
                    <button className="btn-blue">Write Posts</button>
                </Link>
            </li>
            <li>
                <Link href={`/${username}`}>
                    <img src={user?.photoURL} alt=/>
                </ Link>
            </li>
        </>
    )
}

function LoggedOut() {
    return (
        <>
            <li>
                <Link href="/enter">
                    <button className="btn-blue">Log in</button>
                </Link>
            </li>
        </>
    )
}

// Top Navbar
export default function Navbar() {


    let loginStatus;
    if (username) {
        loginStatus = <LoggedIn />

    } else {
        loginStatus = <LoggedOut />
    }

    return (
        <nav className='navbar'>
            <ul>
                <li>
                    <Link href="/">
                        <button className={"btn-logo"}>NXT</button>
                    </Link>
                </li>
                {loginStatus}

            </ul>
        </nav>
    )
}

This was my version following the course tutorial...

import Link from 'next/link';
import React from 'react';
import {useContext} from "react";
import {UserContext} from "../lib/context";

// Top Navbar
export default function Navbar() {
    const { user, username } = useContext(UserContext)

    return (
        <nav className='navbar'>
            <ul>
                <li>
                    <Link href="/">
                        <button>FEED</button>
                    </Link>
                </li>

                {/* user is signed in and has username */}
                {username && (
                    <div>
                        <li className='push-left'>
                            <Link href="/admin">
                                <button className="btn-blue">Write Posts</button>
                            </Link>
                        </li>
                        <li>
                            <Link href={`/${username}`}>
                                <img src={user?.photoURL} alt=/>
                            </Link>
                        </li>
                    </div>
                )}


                {/* user is not signed in OR has not created username */}
                {!username && (
                    <li>
                        <Link href="/enter">
                            <button className="btn-blue">Log in</button>
                        </Link>
                    </li>
                )}
            </ul>
        </nav>
    )
}

Neither have worked... I'm using WebStorm

firebase-v9 components/HeartButton.js typo

getFireStore() should be postRef

Line 9 in components/HeartButton.js (firebase-v9 branch)

// Allows user to heart or like a post

export default function Heart({ postRef }) {
  // Listen to heart document for currently logged in user
  const heartRef = doc(getFirestore(), 'hearts', auth.currentUser.uid);
  const [heartDoc] = useDocument(heartRef);

  ...

  //incorrect, will reference new collection at root
  const heartRef = doc(getFirestore(), 'hearts', auth.currentUser.uid);
  // should be
  const heartRef = doc(postRef, 'hearts', auth.currentUser.uid);

Error: A required parameter (username) was not provided as a string in getStaticPaths for /[username]/[slug]

Error: A required parameter (username) was not provided as a string in getStaticPaths for /[username]/[slug]
How do I fix this issue?

BUG: anonymous sign in, prevents...

Clicking on the anonymous sign in ends up preventing a user to instead login through google. Clicking on the login button while the choose your username component us up, I'd expect that the signing with google or anonymous would come back but instead, it doesn't seem like there is anyway to return back to having both options thus forcing you to sign in anonymously.

Rewrite for Next.js 13 `appDir`

@codediodeio I was wondering if you are planning to rewrite this course for the new app directory of Next.js 13? Would be curious to know if and how you could use Firebase with server components. Using middleware for checking auth status would be interesting too.

react-hook-form v7

I am at the part in the series where I am attempting to edit a post. I have run into an issue where clicking the 'Edit Post` button is causing a crash.

I see the error

Unhandled Runtime Error
TypeError: path.split is not a function
Call Stack
get
node_modules/react-hook-form/dist/index.esm.mjs (33:0)
register
node_modules/react-hook-form/dist/index.esm.mjs (1900:0)
commitAttachRef
node_modules/react-dom/cjs/react-dom.development.js (23645:0)
commitLayoutEffectOnFiber
node_modules/react-dom/cjs/react-dom.development.js (23503:0)
commitLayoutMountEffects_complete
node_modules/react-dom/cjs/react-dom.development.js (24688:0)
commitLayoutEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24674:0)
commitLayoutEffects
node_modules/react-dom/cjs/react-dom.development.js (24612:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26823:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26682:0)
finishConcurrentRender
node_modules/react-dom/cjs/react-dom.development.js (25981:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25809:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

This seems to related to version 7 of react-hook-form?

I have changed the <input> in the PostForm from

<input
  className={styles.checkbox}
  name="published"
  type="checkbox"
  ref={register}
/>

to

<input
  className={styles.checkbox}
  name="published"
  type="checkbox"
  {...register("published", { required: true })}
/>

This still gives the same error though afterward. My dependencies are:

"dependencies": {
  "firebase": "^9.9.4",
  "lodash.debounce": "^4.0.8",
  "lodash.kebabcase": "^4.1.1",
  "next": "^12.3.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-firebase-hooks": "^5.0.3",
  "react-hook-form": "^7.35.0",
  "react-hot-toast": "^2.3.0",
  "react-markdown": "^8.0.3"
}

Server Error Error: A required parameter (username) was not provided as a string in getStaticPaths for /[username]/[slug]

This error occurred when I imported my firebase database configurations and this shows when I click on any post or when I click on Live view button.
Same Code Without changes.

error -
Server Error
Error: A required parameter (username) was not provided as a string in getStaticPaths for /[username]/[slug]

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Error: react-hook-form from version 6.x.x to 7.x.x

In /admin/[slug].js

Error 1:

const { register, errors, handleSubmit, formState, reset, watch } = useForm({ defaultValues, mode: 'onChange' });
should be changed to

const { register, handleSubmit, formState, reset, watch, formState: { errors } } = useForm({ defaultValues, mode: 'onChange' });

Error 2:

<textarea
    name="content"
    ref={register({
      maxLength: { value: 20000, message: 'content is too long' },
      minLength: { value: 10, message: 'content is too short' },
      required: { value: true, message: 'content is required' },
    })}
  ></textarea>

should be changed to

<textarea 
          name='content'
          id='content'
          aria-invalid={errors.content ? "true" : "false"}
          {...register('content',
          { maxLength: { value: 20000, message: 'content is too long' },
            minLength: { value: 10, message: 'content is too short' },
            required: { value: true, message: 'content is required' }}
          )} ></textarea>

Error 3:

<input className={styles.checkbox} name="published" type="checkbox" ref={register} />

should be changed to

<input 
    className={styles.checkbox} 
    name="published" 
    type="checkbox" 
    {...register('published')} />

postRef should fetch "slug" not docId

On this line you're trying to fetch a document by the slug, but this will return nothing unless the slug is the document ID.

This line should simply be replaced with

const postRef = userDoc.ref
      .collection("posts")
      .where("slug", "==", slug)
      .limit(1);

Happy to submit a PR unless I'm missing something?

Heart button not working properly

The heart button is not working. The unheart button is showing up even though the signed in user has not liked the post.

Error in TypeScript

When i was doing the Course i found an error that prevented to upload the project to Vercel, the error itself did not cause any problem to the website, it was just that TypeScript complained.

The Error was 'Argument of type 'string | string[]' is not assignable to parameter of type 'string'. Type 'string[]' is not assignable to type 'string'.'

The string is the slug, and to fix it you need to convert the slug to a string (I'm fairly new to programming, but wasn't the slug a string already?)

anyway, you have to make the slug a string, with let StringSlug = (slug as string) and replace .doc(slug); to .doc(StringSlug);

function PostManager() {
  const [preview, setPreview] = useState(false);

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

  let StringSlug = (slug as string)

  const postRef = firestore.collection('users').doc(auth.currentUser.uid).collection('posts').doc(StringSlug);
  const [post] = useDocumentData(postRef);

/pages/admin/[slug].tsx

403 for img's src

Description:

• google will return 403 on img with src from user object after login if there is no referrerpolicy added to img tag

solution:
in components/Navbar.js
update img as:
<img src={user?.photoURL} referrerPolicy="no-referrer" />

Issue with the CSS

styles/global.css has error with the --color-text variable in line 68 that throws the error in the IDE when trying to run the application.

Firebase v9

hello, this code is not working on firebase v9. can you somehow update the code to fit the needs of the new firebase?
thanks in advance,
Nick

Logging out while on a Post page causes an error in HeartButton component

The following error occurs when clicking Log Out on a post page ([username]/[slug]).

It seems that the AuthCheck fails and the HeartButton component is mounted. This shouldn't happen since the HeartButton code requires a logged in user. How can we ensure the AuthCheck works correctly to prevent this?

next-firebase-course/pages/enter.js lodash debounce missing prefix

The "username page" returns an error caused by "debounce" missing the "._" lodash prefix at L96 in next-firebase-course/pages/enter.js . The error occurs when coding along with the Custom Usernames video at 4'45".

This omission is visible in the video, on the fireship.io site, and in the source code here on Github. It prevents any further rendering of the application past the Custom Username video unless a username is created manually in Firestore and in this case the page is skipped altogether.

Update security rule for collection group queries

For some reason, I needed to update the security rule of this course from:

// Required for collection group queries
match /posts/{postId} {
allow read;
}

to

// Required for collection group queries
match /{path=**}/posts/{postId} {
allow read;
}

Otherwise I was getting permission denied errors. The docs also state this here: https://firebase.google.com/docs/firestore/security/rules-query#collection_group_queries_and_security_rules

kebabcase doesn't filter emojis from the title

I was trying to imitate dev.to's posts full of emojis and I found this bug

The function does not filter Unicode emojis, which makes next.js unable to pre-render posts correctly due to the post slug

after some googling I found a simple solution to this

  let str = "Hi! 😺😺😺😺 Hello tom👩‍🚒👨‍💻";
  let regex = new RegExp(/\p{Emoji}/gu);
  console.log(str.replace(regex, ""));

another solution might be the one supplied here
Mozilla docs

'users' collection not found in Firestore after successful Google Authentication

Stuck on the auth hook video where we need to subscribe to the document changes in order to get the username.

Can fixed by manually create a Firestore collection called 'users' and a document with the same uid as the authenticated user.

However, this was not mentioned in any part during the setup of Firebase or before the start of the Authentication part.

got error when create post

FirebaseError: Missing or insufficient permissions.
which part of rule cause this error?

Using Netlify as a host

Can I deploy the website using Firebase and NextJS to Netlify like Jeff did for Vercel.
I really don't want to use Vercel or Firebase's hosting.