NextJS with Firebase Auth App Router Template

See Live Demo of this Template

Topics

• Get Started
• Starting the Project
• Deploying on Netlify

---

Getting Started

Use Template

1. To get started, click the GREEN "Use this Template" button at the top of the repo

2. Make sure YOUR github account is selected in the dropdown and name your project

3. Clone your new repo to your local machine

4. Go to the NEXT section

Starting the Project

1. Create a Firebase project and set up authentication. Use these videos as a refresher if needed.
2. From your command line, be in the root directory and run npm install OR npm i for short.
3. Next, run npm run prepare. This command sets up husky to track eslint errors on commit that will make your deploy fail on Netlify.
4. To start your application, run npm run dev. THIS IS THE COMMAND YOU WILL USE TO RUN YOUR DEVELOPMENT SERVER FROM NOW ON.
5. Open http://localhost:3000 with your browser.

Deploying on Netlify

Netlify will automatically detect your project and prepopulate the settings, but should something go wrong and it does not, here are the commands:

• Build Command: npm run build
• Publish directory: .next

Additional Steps to Take on Netlify

• Add Environmental Variables

  • Any Enviromental variables you are using in your .env file should be added to Netlify.
    • Go to Site settings > Build & deploy > Environment > Environment variables and the keys and values there if you did not add them when you were deploying your site

• Update Firebase URL Settings

  • In Firebase under Authentication select sign in methods, scroll to Authorized domains. Add your Netlify URL.

Learn More about Next.js

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.