<aside> 💡

If you need help or have questions during the workshop, feel free to raise your hands or submit an inquiry through the Discord channel

</aside>

Installation and Setup

Let’s scaffold a Next.js project Run the command one level above in the directory that should contain your project E.g. you want to have the project in Desktop → my-app, run the command in Desktop folder

npm install -g pnpm
pnpx create-next-app@latest

When you run create-next-app, you’ll run into options that the setup guide will ask. Select the following options

✔ What is your project named? … my-app // Change this to whatever you prefer
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … Yes // Default is No
✔ Would you like to customize the import alias (@/* by default)? … No

Setting up Firebase

Creation of Firebase instance

Head to https://console.firebase.google.com/

As per the requirements, you should be logged in to your personal Google account If you’re using a managed/school Google account, ensure you can create a Firebase project in the account

Create a new project, and set the project name to whatever you’d like. I set mines to to-do On the second page, it will ask if you’d like to enable Google Analytics, we will not be covering that so please disable it

Adding Firebase to Next.js

On the homepage, it should say Get started by adding Firebase to your app Below that, there is an option for Web

For the app nickname, name it whatever you’d like. I set mines to nextjs No need to set up Firebase Hosting

Shortly, it will show instructions for adding the SDK to our project. Install the SDK

pnpm install firebase

Then, create a file in app directory called firebase.ts Don’t copy and paste the config given by Firebase, use this instead

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// <https://firebase.google.com/docs/web/setup#available-libraries>

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FB_APIKEY,
    authDomain: process.env.NEXT_PUBLIC_FB_AUTHDOMAIN,
    projectId: process.env.NEXT_PUBLIC_FB_PROJECTID,
    storageBucket: process.env.NEXT_PUBLIC_FB_STORAGEBUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FB_MESSAGINGSENDERID,
    appId: process.env.FB_APPID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { app, db, auth };

Create a new file called .env in the root of your project and paste this in

NEXT_PUBLIC_FB_APIKEY=
NEXT_PUBLIC_FB_AUTHDOMAIN=
NEXT_PUBLIC_FB_PROJECTID=
NEXT_PUBLIC_FB_STORAGEBUCKET=
NEXT_PUBLIC_FB_MESSAGINGSENDERID=
NEXT_PUBLIC_FB_APPID=

Copy and paste the provided config with your instance information to the environment variables It should look like this

NEXT_PUBLIC_FB_APIKEY=AIzaSyDXQhEEkA-zjvwEB3iXghAYMk5JGj6_q5o
NEXT_PUBLIC_FB_AUTHDOMAIN=to-do-cf4e2.firebaseapp.com
NEXT_PUBLIC_FB_PROJECTID=to-do-cf4e2
NEXT_PUBLIC_FB_STORAGEBUCKET=to-do-cf4e2.firebasestorage.app
NEXT_PUBLIC_FB_MESSAGINGSENDERID=244053790926
NEXT_PUBLIC_FB_APPID=1:244053790926:web:10d27a9500116019d9409f

<aside> 💡

Stuck/Confused at file directory? Two files should have been created, one in app directory and one in root directory of your project

</aside>

Turning on Firebase features

Authentication

On the sidebar, go into Build > Authentication Click Get Started Then, ensure you’re in Sign-in Method tab and click on Google Enable the switch, you may need to choose your email from the drop-down in Support email for project Click Save and now Authentication should have been enabled

Cloud Firestore

On the sidebar, go into Build > Firestore Database. Click Create Database. Set the location to Singapore. On the next page, use the default setting Start in production mode. A Firebase Rules Config will be provided to be used. After provisioning, you should be at the data screen, where you can add and view data