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

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: *