Comprehensive NEXT.js 14 Course: Creating and Launching a Full Stack App with Firebase & TailwindCSS

In this detailed tutorial, we will walk you through building and deploying a full stack app using NEXT.js 14, Firebase, and TailwindCSS. We will cover all the necessary steps to create a fully functional app, from setting up the project to deploying it to a live server.

Setting up the project
To start, make sure you have Node.js installed on your machine. You can check if Node.js is installed by running the following command in your terminal:

node -v

If Node.js is not installed, you can download it from the official website:

https://nodejs.org

Next, create a new directory for your project and navigate into it using the terminal. Run the following commands to create a new NEXT.js project:

npx create-next-app my-nextjs-project

Replace my-nextjs-project with the name of your project. This command will generate a new project with all the necessary files and dependencies.

Installing Firebase
Firebase is a platform developed by Google for creating mobile and web applications. It provides a number of services, including authentication, database, storage, and hosting. To use Firebase in our project, we need to install the Firebase SDK. Run the following command in your terminal to install Firebase:

npm install firebase

Creating a Firebase project
Next, we need to create a new Firebase project. Go to the Firebase console and sign in with your Google account. Click on the "Create a project" button and follow the instructions to create a new project.

Once the project is created, click on the "Web" option to add a web app to your project. Enter a name for your app and click on the "Register app" button. Firebase will generate a configuration object that we will use in our NEXT.js app.

Setting up Firebase in NEXT.js
Now that we have created a Firebase project, we need to set it up in our NEXT.js app. Create a new file called firebase.js in the lib directory of your project and add the following code:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

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

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

Replace the placeholders (YOUR_API_KEY, YOUR_AUTH_DOMAIN, YOUR_PROJECT_ID, YOUR_STORAGE_BUCKET, YOUR_MESSAGING_SENDER_ID, YOUR_APP_ID) with the corresponding values from your Firebase project.

Creating a Firebase authentication service
To enable authentication in our app, we need to create a new service that handles user authentication using Firebase. Create a new file called auth.js in the lib directory and add the following code:

import { auth } from './firebase';

export const signInWithGoogle = () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  return auth.signInWithPopup(provider);
};

export const signOut = () => auth.signOut();

export const onAuthStateChanged = (onChange) => auth.onAuthStateChanged(onChange);

This service provides functions for signing in with Google, signing out, and listening to changes in the user’s authentication state.

Building the app UI with TailwindCSS
TailwindCSS is a popular CSS framework that makes it easy to build responsive web designs. To use TailwindCSS in our project, we need to install it. Run the following command in your terminal:

npm install tailwindcss

Next, create a new file called tailwind.config.js in the root directory of your project and add the following code:

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,jsx}', './components/**/*.{js,jsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now, we need to configure NEXT.js to work with TailwindCSS. Create a new file called postcss.config.js in the root directory and add the following code:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Finally, we need to import TailwindCSS styles in our app. Open the styles/globals.css file and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Deploying the app to Firebase Hosting
Now that we have built our app, it’s time to deploy it to Firebase Hosting. First, install the Firebase CLI by running the following command in your terminal:

npm install -g firebase-tools

Next, initialize Firebase Hosting by running the following command in your project directory:

firebase init hosting

Follow the on-screen instructions to set up Firebase Hosting for your project. Once Firebase Hosting is set up, you can deploy your app by running the following command:

firebase deploy --only hosting

After the deployment is complete, Firebase will provide you with a live URL where your app is hosted.

Congratulations! You have successfully built and deployed a full stack app using NEXT.js 14, Firebase, and TailwindCSS. I hope this tutorial has been helpful in guiding you through the process of creating a fully functional app.