Description

A boilerplate for Next.js App.

• This boilerplate is built using Next.js Server Side Rendering(SSR), and have used Typescript Lang for writing the app's logic.
• It uses the Redux state management, this helps us to have a global and presistent store all along our application .
• For Authentication , Database and Storage, this repo contains the use of Firebase (ie. Firebase Authentication , Firebase Realtime Database and Cloud Storage for Firebase ).
• For styling we are using SASS lang and Bootstrap Libraries

Contents

• Global Requisites
• App Structure
• Install, Configure & Run
• Screens

Global Requisites

• next (>=7.0.2)
• firebase (>=5.7.2)

App Structure

Note: I am mentioning only files/folders which you need to configure if required

├── pages
│   ├── profile
│   │   ├── details-update.tsx
│   │   └── picture-update.tsx
│   ├── _app.tsx
│   ├── dashboard.tsx
│   ├── forgot-password.tsx
│   ├── index.tsx
│   ├── reset-password.tsx
│   ├── signin.tsx
│   └── signout.tsx
├── src
│   ├── components
│   │   ├── Auth
│   │   │   ├── CheckAuth.tsx
│   │   │   ├── FotgotPassword.tsx
│   │   │   ├── RefreshToken.tsx
│   │   │   ├── Signin.tsx
│   │   │   └── Signup.tsx
│   │   ├── Navigation
│   │   │   └── NavBar.tsx
│   │   └── Profile
│   │       ├── ProfileDetailsUpdate.tsx
│   │       └── ProfilePictueUpdate.tsx
│   ├── firebase
│   │   ├── auth.ts
│   │   └── userInterfaces.ts
│   ├── interfaces
│   │   ├── auth.ts
│   │   └── index.ts
│   ├── redux
│   │   ├── actions
│   │   │   ├── index.ts
│   │   │   └── userActions.ts
│   │   ├── reducer
│   │   │   ├── authReducers.ts
│   │   │   ├── index.ts
│   │   │   └── userReducers.ts
│   │   └── store
│   │       └── index.ts
├── styles
│   ├── bootstrap
│   └── main.scss
├── .babelrc
├── .gitignore
├── .tsconfig.json
├── firebaseConfig.json
├── next.config.json
├── package.json
├── README.md
├── typings.d.ts

Install, Configure & Run

Below mentioned are the steps to install, configure & run in your platform/distributions.

Note: It is preassumed here that you have mongoose running in background & you have created the database.

# Clone the repo.
git clone https://git.geekyants.com/products/nextjs-typescript-firebase;

# Goto the cloned project folder.
cd nextjs-typescript-firebase;

# Install NPM dependencies.
# Note: You can review the list of dependencies from the below link.
# https://github.com/faizahmedfarooqui/nodets/network/dependencies
npm install;

# Edit your firebaseConfig.json file using any editor of your choice.
# Please Note: You should add all the configuration values provided by
# firebase console , otherwise App will crash
vim firebaseConfig.json;

# Run the app
npm run dev;

Further Steps

Adding a page

• To add a new page , create a new file named <your-page-name>.tsx
• You can further import your own React Components and use it under render fnction

Setting Up Firebase

• Create a new project in Firebase Console , if you haven't already
• Enable Authentication (Password Based) , Database and Storage on your project
• copy and paste your api credentials in firebaseConfig.json
• To add a table of your own go to your Firebase project -> database -> create database , again , if you haven't already
• Use the following code under your project to update/create a table

import firebase from 'src/firebase';
const ref = firebase
  .database()
  .ref()
  .child('table-name');
ref.child('unique-name-for--the-entry').set(/* table fields*/);

• To get the data from firebase table use

var Id = id; //unique-name-for--the-entry
firebase
  .database()
  .ref('/table-name/' + userId)
  .once('value')
  .then(function(snapshot) {
    const data = snapshot.val();
    //perform operation on data here
  });

Note

if you wish to fetch data in getInitialProps of a page , make sure you have enabled CORS on your server , alternatively you can use this chrome extension Allow-Control-Allow-Origin: *

Screens

SignIn Page

Note: This page contains signin form and prefetched data from https://cat-fact.herokuapp.com/facts

SignUp Page

ForgotPassword Page

Dashboard Page

With Dropdown Menu

Profile Details Update Page

Profile Picture Update Page

Reset Passsword Page