Interested in running this project client side and not server side? Check out the below page
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
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
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> 💡
This key is very important and will allow anyone to do whatever they’d like on your Firebase instance with this key, so keep it secure
</aside>