Next.js 13 Firebase Starter

This is a starter template for building Next.js 13 applications with Firebase. It provides a solid foundation for developing modern web applications with server-side rendering, authentication, and real-time data synchronization.

Features

Next.js 13: Build powerful and scalable server-side rendered React applications.
Firebase: Leverage the Firebase platform for authentication, real-time database, and cloud functions.
Tailwind CSS: Rapidly build custom user interfaces using the utility-first CSS framework.
Automatic Code Splitting: Optimize performance by splitting your JavaScript code into smaller, cacheable chunks.
Dynamic Routing: Create dynamic routes for handling different pages and content.
Hot Module Replacement: Enjoy a fast development experience with hot module replacement for instant code changes.
Environment Variables: Safely manage environment-specific configuration values using environment variables.
ESLint and Prettier: Maintain code quality and consistency with the help of ESLint and Prettier.

Prerequisites

Before getting started, ensure you have the following prerequisites:

Node.js 14 or higher
npm or yarn package manager

Getting Started

To start a new project using this template click Use this template button.
Navigate into the project directory: cd nextjs-13-firebase-starter
Install the dependencies:

  npm install
  # or
  yarn install

Run the development server:

  npm run dev
  # or
  yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Set Up Firebase

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

Log in with your Google account.
Click on Go to console button.
Click Add Project card.
Give your project a name.
Click on Continue button.
Disable Google Analytics for this project (unless you wish to use it).
Click Create project button.
Click on the web icon button to create your web app. It will show a text popup Web.
Register app by giving it a nickname and click Register app button.
Where package.json is located, in your cli, type npm i firebase.
Copy configuration file. Make a new file in src called firebase called firebase.js.
In project root, create a file and name it .env.
Make sure you add .env.local to your .gitignore so you don't expose your variables in git repo.
Follow the instructions here at https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables to add your variables from firebase.js into this file.

Example...

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

Replace the value of your keys with the values you find in firebaseConfig in firebase.js.

Now, replace the firebaseConfig object with this...

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

Click on Continue on console button
On your project homepage, choose a product to add to your app. First, click on Authentication.
Under Get started with Firebase Auth by adding your first sign-in method select Email/Password.

You should now be setup to use Firebase.

Authentication

In src/firebase directory, create a directory called auth.
Create a signin.js file in the same directory.

Folder Structure

The folder structure of this project is organized as follows:

pages: Contains the Next.js pages for server-side rendering.
components: Holds the reusable React components.
lib: Includes utility functions and modules.
public: Stores static assets such as images, fonts, and stylesheets.
styles: Contains global styles and Tailwind CSS configuration.
firebase: Houses the Firebase configuration and Firebase-related functions.

Feel free to modify and expand the folder structure according to your project requirements.

Deployment

To deploy your Next.js application with Firebase, follow the Firebase deployment instructions specific to your hosting option (Firebase Hosting, Cloud Functions, etc.). Make sure to set up the appropriate environment variables for your production environment.

Contributing

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgements

This project was created using the Next.js framework and Firebase platform.

Resources

Redoxahmii/nextjs-13-firebase-setup