Category: Next

Setup Firebase in Next.js Project

In this tutorial, I will show you how to set up Firebase in a Next.js project. It’s actually pretty simple.

Setup Next.js Project

First, create a new Next.js project:

npx create-next-app myproject

You can verify that everything is working okay by quickly running npm run dev.

Then, install the Firebase package into your new project:

npm install firebase

Setup Firebase Project

Now, head over to the Firebase website to set up a new Firebase project:

Then, select the option to add Firebase to your web app:

Next, register your app with a name and copy the code that is created for you. This code will initialize Firebase in your project.

Add Firebase config to Next.js Project

In your project, create a new file to hold the Firebase configuration code:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

export const firebaseApp = initializeApp(firebaseConfig);

Now, you can import the Firebase app into other files within your project and thus access Firebase in your project.

Import the app const from the Firebase config file you just created:

import firebaseApp from '../firebase_config';

Working with Firestore

Firestore is a powerful Cloud, NoSQL database within Firebase. There is a good chance you will use it in your web application.

To setup Firestore within your project, add the following code to your Firebase config file:

First, import the getFirestore function at the top:

import { getFirestore } from "firebase/firestore";

Then, create a database using the function, passing in your firebaseApp from before:

const db = getFirestore(firebaseApp);

Lastly, export the database along with your firebase app:

export { firebaseApp, db }

Now, you can work with Firestore in your project. Here’s an example:

import { firestore } from '../firebase_config';
import { useState } from 'react';

import { collection, QueryDocumentSnapshot, DocumentData } from "@firebase/firestore";

const todosCollection = collection(firestore,'todos');

const [todos,setTodos] = useState<QueryDocumentSnapshot<DocumentData>[]>([]);

This was just a very simple, bare-bones introduction to using Firebase in Next.js. Hope it helped.

Next.js Global State w/ React Context API

The easiest way to implement global state management in your Next.js application is the React Context API.

I made a new file called ContextProvider.js and created a Context object called MyContext:

import React, { useState, useContext, useEffect } from 'react';

const MyContext = React.createContext();

export function useMyContext() {
    return useContext(MyContext);
}

export function MyProvider({ children }) {
    const [myValue, setMyValue] = useState(false);

    return (
        <MyContext.Provider value={{myValue, setMyValue}}>
            {children}
        </MyContext.Provider>
    );
}

Once this is done, go back to pages/_app.js and wrap your component with the context provider:

import { MyProvider } from '../contexts/MyProvider';

function MyApp({ Component, pageProps }) {
    return (
        <MyProvider>
            <Component {...pageProps} />
        </MyProvider>
    );
}

export default MyApp;

Now I can use the state within MyContext in every part of the application.

Make sure to be careful about how much you put into Context. You don’t want unnecessary re-renders across pages when you could just share them across specific components.