This is a Next.js project bootstrapped with create-next-app.

Getting Started

The NextJs Firebase Starter Kit

folder	purpose
store	An empty Redux store (import anywhere using '@store' alias)
components	Components folder for you app ( sample auth components are created. import anywhere using '@components' alias )
firebase	Contains firebase cloud function in function.js file. index.ts is where we initialize and export various firebase services

Create .env file and copy .env.template 's content.

Create a firebase project and paste the corresponding project config variables in the .env file

NOTE

Make sure you upgrage to Firebase Blaze plan to use cloud functions.

Currently the app is using light-theme. You can comment out lightTheme import in the pages/_app.tsx and instead import the darkTheme. Make sure you provide the same to the <ThemeProvier />

Install all the dependencies:

npm install
#or
yarn install

Now, 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 pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Deploy on Firebase

Make sure that you are on the Blaze plan. Firebase does not support SSR, hence we will deploy a cloud function that will handle all the requests to the app.

You can find the function in firebase/function.js file.

First login to firebase using

firebase login

then run the following command to deploy to firebase

npm run deploy
# or
yarn deploy