After building my Firebase Todo App in [Qwik](https://code.build/p/qwik-todo-app-with-firebase-P2rX5i), [SvelteKit](https://code.build/p/sveltekit-todo-app-with-firebase-C73xaa), and [Angular](https://code.build/p/angular-todo-app-with-firebase-fmLJ37), I realized the most popular Framework has still been left behind. I must admit I am not a huge React fan, but I still write articles about it due to the overwhelmingly bad design patterns you see everywhere. This version is very close to the Qwik Version, but with a few changes. I prefer Qwik because it is awesome, but more people are still enquiring on how to build in NextJS. ## TL;DR This Todo app version uses the NextJS client components to connect to Firebase. However, you can see that using a Server Component for fetching is still possible as long as you don’t need Authentication for the documents you are parsing. I use `useState` here to create custom hooks for todos and user state. This can be easily deployed to any Edge Function. ## Firebase Setup Setting up Firebase is exactly the same as every other server Framework. Angular is the only exception because it uses ZoneJS and has an official package. ```tsx import { getApps, initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; const firebase_config = JSON.parse( process.env.NEXT_PUBLIC_FIREBASE_CONFIG as string ); // initialize and login if (!getApps().length) { initializeApp(firebase_config); } export const auth = getAuth(); export const db = getFirestore(); ``` We have to prefix our name to our env variable with `NEXT_PUBLIC_`. We store it in our `.env` file and we must add double quotation marks to the keys. ```tsx NEXT_PUBLIC_FIREBASE_CONFIG={"apiKey":"...","authDomain":"..."...} ``` ## User Hook I made a custom user hook to track the state of the user’s login. Other frameworks may use stores or signals, but React has hooks. ```tsx export function _useUser( initialValue: UserState = { loading: true, data: null }) { const _store = useState(initialValue); const setUser = _store[1]; useEffect(() => { setUser(v => ({ ...v, loading: true })); // subscribe to user changes return onIdTokenChanged(auth, (_user: User | null) => { if (!_user) { setUser({ data: null, loading: false }); return; } // map data to user data type const { photoURL, uid, displayName, email } = _user; const data = { photoURL, uid, displayName, email }; // print data in dev mode if (process.env.NODE_ENV === 'development') { console.log(data); } // set store setUser({ loading: false, data }); }); }, [setUser]); return _store; } export const useUser = (initialValue?: UserState) => useShared('user', _useUser, initialValue); ``` Here you create a user state with `useState`. This holds the loading and user data. You could create two different hooks for this, but since the states will usually be updated at the same time, one `usState` hook works fine. You then subscribe to the `onIdTokenChanged` Firebase observable inside of `useEffect` in order to track the user login. Only pass the `setUser` inside the dependency array, as that never changes. If you pass the user data to it, you could get an infinite loop. We update the user state based on the observable, but we only save the data we need. I also print the full data to the console in development mode. ### Use Shared Hook I created a custom reusable `use-shared.ts` hook. I’m not going to get into the details here, but just know it allows you to share as many states as you want with only one provider. It stores all contexts in a map to simplify your app. You can read about it in my article [Easy Shared Reactive State in React](https://dev.to/jdgamble555/easy-shared-reactive-state-in-react-without-external-libraries-36cc). What you need to know, is that without using it, you would be creating 3 separate subscriptions to the `onIdTokenChanged` observable, which is more than you need and wastes memory. For the sake of completing, here is the code. ```tsx 'use client'; import { FC, ReactNode, createContext, useContext, type Context } from "react"; const _Map = () => new Map(); const Context = createContext(_Map()); export const Provider: FC<{ children: ReactNode }> = ({ children }) => {children}; const useContextProvider = (key: string) => { const context = useContext(Context); return { set value(v: T) { context.set(key, v); }, get value() { if (!context.has(key)) { throw Error(`Context key '${key}' Not Found!`); } return context.get(key) as T; } } }; export const useShared = ( key: string, fn: (value?: A) => T, initialValue?: A ) => { const provider = useContextProvider>(key); if (initialValue !== undefined) { const state = fn(initialValue); const Context = createContext(state); provider.value = Context; } return useContext(provider.value); }; ``` We also add our universal provider to our root `page.tsx` file. ```tsx import Home from "@/components/home"; import { Provider } from "@/lib/use-shared"; const HomePage = () => { return ( ); }; export default HomePage; ``` ## Todo Hook Just like in my other versions of this, you need to get the user in order to get the todos. The Firebase subscription requires the user id. ```tsx export function useTodos( _user: ReturnType ) { const _store = useState<{ todos: TodoItem[], loading: boolean }>({ todos: [], loading: true }); const user = _user[0]; const setTodos = _store[1]; useEffect(() => { setTodos(v => ({ ...v, loading: true })); if (!user.data) { setTodos({ loading: false, todos: [] }); return; } return onSnapshot( // query realtime todo list query( collection(db, 'todos'), where('uid', '==', user.data.uid), orderBy('created') ), (q) => { // get data, map to todo type const data = snapToData(q); /** * Note: Will get triggered 2x on add * 1 - for optimistic update * 2 - update real date from server date */ // print data in dev mode if (process.env.NODE_ENV === 'development') { console.log(data); } // add to store setTodos({ loading: false, todos: data }); }); }, [setTodos, user.data]); return _store[0]; }; ``` This hook is very similar to the user hook, but we require the user when we initiate it. We subscribe to the realtime updates with `onSnaphot`, and only get the tasks created by our user. We don’t need to share this hook, as we will only call it in the todo component. We always put this in a separate file due to the *Single Responsibility Principle*. ```tsx export interface TodoItem { id: string; text: string; complete: boolean; created: Date; uid: string; }; export const snapToData = ( q: QuerySnapshot ) => { // creates todo data from snapshot if (q.empty) { return []; } return q.docs.map((doc) => { const data = doc.data(); return { ...data, created: new Date(data.created?.toMillis()), id: doc.id } }) as TodoItem[]; } ``` Here we declare our Todo type and handle the document meta data (snapshot) to data conversion. ## Modifying Data For the other CRUD actions, we can easily use the sharable code. ```tsx export const addTodo = ( e: FormEvent, uid: string ) => { e.preventDefault(); // get and reset form const target = e.target as HTMLFormElement; const form = new FormData(target); const { task } = Object.fromEntries(form); if (typeof task !== 'string') { return; } // reset form target.reset(); addDoc(collection(db, 'todos'), { uid, text: task, complete: false, created: serverTimestamp() }); } export const updateTodo = (id: string, complete: boolean) => { updateDoc(doc(db, 'todos', id), { complete }); } export const deleteTodo = (id: string) => { deleteDoc(doc(db, 'todos', id)); } ``` This is standard Firebase handling here. Notice we use the `FormEvent` instead of Submit event. This is a specific type to React that helps us with the submit form event. ## Home Component Our first component just sets the user state up to be reused, and checks for login. ```tsx 'use client'; import { Loading, Login } from "@/lib/helpers"; import { useUser } from "@/lib/use-user"; import Profile from "./profile"; export default function Home() { const [user] = useUser({ data: null, loading: true }); return (

NextJS Firebase Todo App

{user.loading ? : user.data ? : }

); } ``` We make this a client component at the top, and all children will be clients automatically. ## Profile Component Our profile component uses the user and displays it with the todos. We return nothing if there is not user, but technically there should never be a case where this component is displayed when this isn’t a user. This does shut up TypeScript though, and is good practice to handle all possible situations. ```tsx import { Logout } from "@/lib/helpers"; import { useUser } from "@/lib/use-user"; import Image from 'next/image' import Todos from "./todos"; export default function Profile() { const [user] = useUser(); if (!user.data) { return; } const { displayName, photoURL, uid } = user.data; return (

Hi {displayName}!

{photoURL && user avatar

}

Your userID is {uid}

); } ``` ## Todos Component ```tsx import { addTodo, useTodos } from "@/lib/use-todos"; import { useUser, userData } from "@/lib/use-user"; import { Todo } from "./todo-item"; export default function Todos() { const _user = useUser(); const { todos } = useTodos(_user); const user = _user[0]; if (!user.data) { return; } return (

{todos.length ? todos.map((todo) => ) :

Add your first todo item!

}

); } ``` The todos hook requires a user from the custom user hook, then we just print them in a grid. Some other versions of this may use a table, but I prefer the grid since Tailwind makes this easy. Make sure to keep track of the key in your todo item. ## Todo Item Component Here we keep track of the individual key (for rendering purposes) with a *Fragment*. Everything else is just a button that does what is expected. ```tsx import { TodoItem, deleteTodo, updateTodo } from "@/lib/use-todos"; import { Fragment } from 'react'; // each todo item export const Todo = ({ todo }: { todo: TodoItem, key: string }) => { return ( {todo.text} {todo.id} {todo.complete ? : } ); }; ``` ## Helpers Don’t forget about our helper components. ```tsx import { loginWithGoogle, logout } from "./use-user"; export const Loading = () => { return

; }; export const Login = () => { return }; export const Logout = () => { return

; }; ``` Nothing really groundbreaking here. I just like to organize things simply. ## About Page While that is gist of the app, I also wanted to show you the case where you can fetch Firebase from the server. While Qwik and SvelteKit require separate processes for this, *Server Components* make this extremely simple. ```tsx import { getAbout } from "@/lib/about"; export default async function AboutPage() { const about = await getAbout(); return (

{about.name}

{about.description}

) } ``` Because this is not called inside the default page component, this defaults to a server component. Notice I can call the about function inside the component itself. This can only be done because the entire component is on the server. RSC is wonderful and I hope SvelteKit and others follow. That being said, Qwik doesn’t need it. ### Reusable About Function ```tsx import { doc, getDoc } from "firebase/firestore"; import { db } from "./firebase"; type AboutDoc = { name: string; description: string; }; export const getAbout = async () =>{ const aboutSnap = await getDoc( doc(db, '/about/ZlNJrKd6LcATycPRmBPA') ); if (!aboutSnap.exists()) { throw 'Document does not exist!'; } return aboutSnap.data() as AboutDoc; }; ``` I use this same code in my other versions. ## Firebase Admin If you want to use Firebase Admin to grab the data, you will only be able to deploy to NodeJS or a serverless environment, not Edge environments. You should not need this as client side makes sense for authenticated content. However, you can see my [SvelteKit Firebase Admin](https://code.build/p/sveltekit-todo-app-with-firebase-admin-tqdc5j) version on an idea of how to do this. **Demo:** [Vercel Edge](https://nextjs-firebase-todo.vercel.app/) **Repo:** [GitHub](https://github.com/jdgamble555/nextjs-firebase-todo) **Note:** I had to add the `./lib` directory to my `tailwind.config.ts` file in my app. J

Total Tags: 32

NextJS Todo App with Firebase