Next.js 14 with Firebase: A Practical Walkthrough

Introduction
Combining the robust features of Next.js with the backend capabilities of Firebase can significantly streamline the development of modern web applications. This article provides a step-by-step guide to integrating Next.js with Firebase, complete with practical examples to get you up and running with a fully functional setup.

1) Setting Up Next.js
To kick things off, you'll need to create a new Next.js project. Ensure you have Node.js installed, then run the following command:



npx create-next-app@latest your-project-name

Navigate to your project directory and install Firebase:



npm install firebase

2) Firebase Configuration
After setting up a Firebase project in the Firebase console, you'll receive a configuration object. In your Next.js project, create a firebaseConfig.js file:



// firebaseConfig.js
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  // ... other config properties
};

export default firebaseConfig;

3) Initializing Firebase
In a new firebase.js file, initialize Firebase with the config object:



// firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const auth = firebase.auth();
export const firestore = firebase.firestore();

4) Implementing Authentication
Next.js simplifies the implementation of authentication. Here's how to add Google sign-in to your app:



// auth.js
import { auth } from './firebase';
import firebase from 'firebase/app';

export const signInWithGoogle = async () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  try {
    const result = await auth.signInWithPopup(provider);
    // User signed in successfully
    const user = result.user;
    // ...
  } catch (error) {
    // Handle errors here
    console.error(error);
  }
};

5) Storing and Retrieving Data
Firebase Firestore allows for seamless data management. Below is an example of adding and retrieving documents:



// firestore.js
import { firestore } from './firebase';

export const addDocument = async () => {
  try {
    const docRef = await firestore.collection('items').add({
      name: 'Next.js with Firebase',
      description: 'A powerful combination for modern web apps.',
    });
    console.log('Document written with ID: ', docRef.id);
  } catch (error) {
    console.error('Error adding document: ', error);
  }
};

export const getDocuments = async () => {
  const querySnapshot = await firestore.collection('items').get();
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => ${doc.data().name}`);
  });
};

6) Next.js Server-Side Rendering (SSR)
Next.js excels at SSR, which improves SEO and performance. Here's how you can fetch data from Firestore on the server side and pass it to your React component:



// pages/index.js
import { firestore } from '../firebase';

export async function getServerSideProps(context) {
  const items = [];
  const querySnapshot = await firestore.collection('items').get();
  querySnapshot.forEach((doc) => {
    items.push({ id: doc.id, ...doc.data() });
  });

  return {
    props: { items }, // will be passed to the page component as props
  };
}

const Home = ({ items }) => {
  return (
    <div>
      {items.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

export default Home;

Conclusion
Integrating Next.js with Firebase provides a robust platform for building full-stack applications. By following the examples provided, you can set up authentication, manage data, and leverage server-side rendering for a performant web application. This guide serves as a starting point for developers to explore the vast potential of combining these two powerful technologies.

Remember, the best way to learn is by building, so keep experimenting and enjoy your journey with Next.js! 🎉

If you have any questions, feel free to ask me!

If you like my post, support me on:

Blog

Next.js 14 with Firebase: A Practical Walkthrough

Wadi zaatour

Join Our Newsletter. No Spam, Only the good stuff.

Related