Overview

Kickstart Your Next.js Journey with OAuth and Firebase. Welcome to your Next.js app, pre-equipped with NextAuth.js and Firebase for seamless authentication. Follow the outlined steps to effortlessly set up your project. If you're new to any part of the process, Reveale into the detailed step-by-step guides by clicking on the respective steps card. Fun fact: this site was built using this very template!

Step 1: Clone the Repo

Before you begin, clone the template repository to get started with the project. Open your terminal and run the following command where you want to keep your project code:

git clone https://github.com/JordanReady/next-oauth-firebase-docs-layout.git your-app-name

Step 2: Set up Google Cloud Account

Follow these steps to create a Google Cloud account and set up your project for this Next.js app:

1. Create a Google Cloud account at Google Cloud Console.
2. Set up a new project for your Next.js app.
3. Generate API keys and credentials for Firebase authentication.

For detailed instructions, refer to the Google Cloud Getting Started Guide.

Step 3: Set up Firebase Project

Now, let's set up a Firebase project to use as the backend for your Next.js app:

1. Create a Firebase account at Firebase Console.
2. Add a new project and configure Firebase for web applications.
3. Retrieve the Firebase config settings, including the apiKey, authDomain, projectId, and storageBucket.

Refer to the Firebase Web Setup Guide for detailed instructions.

Step 4: Set up env files and firebase.ts

Configure environment files and create a firebase.ts file to manage Firebase settings:

1. Create a .env file in your project root with

cp .env.example .env

2. Replace the placeholder values with your newly set up Google Cloud and Firebase configs.
3. Create a firebase.ts file with Firebase initialization and configuration.

View the Next.js Environment Variables documentation for details on setting up environment variables.

Step 5: Customize and Develop Your App

Congratulations on completing the initial setup! Now it's time to customize the starter files and start developing your Next.js app.

Feel free to tailor the page.tsx file in your app directory to match your project requirements.

You have the flexibility to either remove or build upon the pre-made route folders. I've included about, protected, and step folders to kickstart your development.

Step 6: Deploy Your Next.js App to Vercel

You're almost there! Let's deploy your Next.js app to Vercel and make it live for the world to see.

Prerequisites:

• Make sure you have a Vercel account. If not, you can sign up at Vercel.

Deployment Steps:

1. Install the Vercel CLI by running:

npm install -g vercel

2. Deploy to production by running:

vercel --prod

3. Import environment variables on Vercel

Congratulations! Your Next.js app is now live on the internet. Share the provided URL with the world.