React Structure

Overview

index.tsx file Structure.

Componenets Version

import React, { useEffect } from "react";
import Router from "next/router";

export default function Index() {

  useEffect(() => {
    Router.push("/components");
  });

  return  <div />;
};

_app.tsx file Structure.

import "../Components/../assets/scss/themes.scss";
import React from 'react';
import Head from 'next/head';
import SSRProvider from 'react-bootstrap/SSRProvider';
import { wrapper } from '../Components/slices';

import { AppContext, AppInitialProps, AppLayoutProps } from 'next/app';
import type { NextComponentType } from 'next';
import { ReactNode } from 'react';
import Layout from '../Components/Common/Layout';

const MyApp: NextComponentType<AppContext, AppInitialProps, AppLayoutProps> = ({
  Component,
  pageProps,
}: AppLayoutProps) => {
  const getLayout = Component.getLayout || ((page: ReactNode) => <Layout>{page}</Layout>);
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Hybrix | Next js & Admin Dashboard </title>
      </Head>
        <SSRProvider>
          {getLayout(
            <Component {...pageProps} />
          )}
        </SSRProvider>
    </>
  );
};

export default wrapper.withRedux(MyApp);

Admin Version

import React, { useEffect } from "react";
import Router, { useRouter } from "next/router";

import { useDispatch } from "react-redux";

import { useProfile } from "@common/UserHooks";

import { logoutUser } from "Components/slices/thunk";

export default function Index() {
  const dispatch: any = useDispatch();
  const router = useRouter()
  const { userProfile, loading } = useProfile();

  useEffect(() => {
    if (!userProfile && loading) {
      dispatch(logoutUser());
    }
  }, [userProfile, loading, dispatch]);

  useEffect(() => {
    if (!userProfile && loading) {
      router.push("/auth/login");
    } else {
      router.push("/dashboard");
    }
  }, [router, loading, userProfile]);
    
}

_app.tsx file Structure.

import "../Components/../assets/scss/themes.scss";
import React, { ReactElement, ReactNode } from 'react';
import Head from 'next/head';
import { Provider } from "react-redux";
import SSRProvider from 'react-bootstrap/SSRProvider';
import { wrapper } from '../Components/slices';

import { AppContext, AppInitialProps, AppLayoutProps, AppProps } from 'next/app';
import type { NextComponentType, NextPage } from 'next';

// Fake backend
import fakeBackend from "Components/helpers/AuthType/fakeBackend";

// Activating fake backend
fakeBackend()

// Import Firebase Configuration file
// import { initFirebaseBackend } from "Components/helpers/firebase_helper";

// const firebaseConfig = {
//   apiKey: process.env.NEXT_PUBLIC_APIKEY,
//   authDomain: process.env.NEXT_PUBLIC_AUTHDOMAIN,
//   databaseURL: process.env.NEXT_PUBLIC_DATABASEURL,
//   projectId: process.env.NEXT_PUBLIC_PROJECTID,
//   storageBucket: process.env.NEXT_PUBLIC_STORAGEBUCKET,
//   messagingSenderId: process.env.NEXT_PUBLIC_MESSAGINGSENDERID,
//   appId: process.env.NEXT_PUBLIC_APPID,
//   measurementId: process.env.NEXT_PUBLIC_MEASUREMENTID,
// };
  
// // init firebase backend
// initFirebaseBackend(firebaseConfig);


type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
const MyApp: NextComponentType<AppContext, AppInitialProps, AppLayoutProps> = ({
  Component,
  pageProps,
  ...rest
}: AppPropsWithLayout) => {
  const { store } = wrapper.useWrappedStore(rest);
  const getLayout = Component.getLayout || ((page) => page);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Hybrix | Next js & Admin Dashboard </title>
      </Head>
      <SSRProvider>
        <Provider store={store}>
          {getLayout(<Component {...pageProps} />)}
        </Provider>
      </SSRProvider>
    </>
  );
};
    
export default MyApp;

Layout setup

You can set the default layout in the Components/slices/layouts/reducer.ts file.

export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.LIGHT,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE
};

layoutType : LAYOUT_TYPES.VERTICAL	To set default layout as Vertical
layoutType : LAYOUT_TYPES.HORIZONTAL	To set default layout as Horizontal
layoutType : LAYOUT_TYPES.TWOCOLUMN	To set default layout as Two column
layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE	To set Light layout mode.
layoutModeType: LAYOUT_MODE_TYPES.DARKMODE	To set Dark layout mode.
layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT	To set layout width Fluid and left sidebar large.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.SMALLHOVER layoutWidthType: LAYOUT_WIDTH_TYPES.BOXED	To set layout width Boxed and left sidebar on hover show menu.
layoutPositionType: LAYOUT_POSITION_TYPES.FIXED	To set layout position Fixed.
layoutPositionType: LAYOUT_POSITION_TYPES.SCROLLABLE	To set layout position Scrollable.
topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT	To set the Light color of Topbar.
topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.DARK	To set the dark color of Topbar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT	To set the Large left sidebar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.COMPACT	To set the Compact left sidebar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.SMALLICON	To set the Icon view left sidebar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.SMALLHOVER	To set the Icon hover left sidebar.
leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT	To set the Default layout.
leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DETACHED	To set the Detached layout.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.LIGHT	To set the Light color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK	To set the Dark color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT	To set the Gradient color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT_2	To set the Gradient-2 color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT_3	To set the Gradient-3 color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT_4	To set the Gradient-4 color of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE	To Disable image on left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG1	To set the img-1 Image of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG2	To set the img-2 Image of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG3	To set the img-3 Image of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG4	To set the img-4 Image of left Sidebar.
preloader: PERLOADER_TYPES.ENABLE	To enable the preloader on the Page.
preloader: PERLOADER_TYPES.DISABLE	To disable the preloader on the Page.