How to create a form in Next.js and save the inputs to Firebase

1. Set up a new Next.js project: Create a new Next.js project using your preferred method, such as using the create-next-app command-line tool or by cloning a starter template.

if you do not know how to setup a nextjs app and firenace, here is a mini tutorial:

Node and Next.js installation and setup
first make sure you’re running a newer version of Node, then to create the app, open terminal in your vscode and write:

$ npx create-next-app

2. Install Firebase: Install the Firebase package by running the following command in your vscode terminal:

npm install firebase

Move over to www.firebase.com and sign in with your google account. Once logged in, click on Add project.

We give the project a name, Test-webApp, and click Continue.

A Project is where you can add different Firebase applications to your app. Whether it is a web app, iOS/Android app, you need, you can set everything up in your Firebase project. Our app is going to be a Web app.

Click on the button circled to set up a web app, within the Firebase project.

For this project, the webapp will be called form (you can name yours whatever you want). Once you’ve given the app a name, press Register app. Just leave the window open after this.

3. Initialize Firebase: In your Next.js application, initialize Firebase by creating a new file called firebase.js in the root directory and adding the following code:

import { getApp, initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc } from "firebase/firestore";

let fireapp

try {
    fireapp = getApp()
} catch (error) {
    fireapp = initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
})
  }

const db = getFirestore();

export { addDoc, db, collection };

Replace firebaseConfig with your Firebase project configuration, it is best to create a .env file.

4. Create a form component: In your Next.js application, create a new file called Form.js in the components directory and add the following code:

import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc} from "firebase/firestore";

const firebaseConfig = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);
const db = getFirestore();

export { addDoc, db, collection };

This creates a form with three fields (name, email, and message) and a submit button. The handleSubmit function is called when the form is submitted, which creates a new document in the messages collection in Firebase Firestore.

5. Add the form to a page: In your Next.js application, create a new page called Contact.js in the pages directory and add the following code:

import Form from '../components/Form';

const Contact = () => {
  return (
    <div>
      <h1>Contact Us</h1>
      <Form />
    </div>
  );
};

export default Contact;

This adds the Form component to a new page called Contact.

6. Test the form: Start your Next.js application and go to the Contact page in your web browser. Fill out the form and submit it. Check the Firebase Firestore console to verify that the data was saved successfully.

That’s it! You have successfully created a form in Next.js and saved the inputs to Firebase.