Nextjs Structure

We have used npm run dev / yarn dev to compile the react app files.
index.tsx file :

import React from 'react';
//import scss
import '@assets/scss/themes.scss';

import { Provider } from 'react-redux';
import { wrapper } from "@slices/index";
import Head from "next/head";

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

// Fake Backend 
import fakeBackend from "@helpers/AuthType/fakeBackend";

// Activating fake backend
fakeBackend();

// const firebaseConfig = {
//   apiKey: process.env.REACT_APP_API_KEY,
//   authDomain: process.env.REACT_APP_AUTHDOMAIN,
//   databaseURL: process.env.REACT_APP_DATABASEURL,
//   projectId: process.env.REACT_APP_PROJECTID,
//   storageBucket: process.env.REACT_APP_STORAGEBUCKET,
//   messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
//   appId: process.env.REACT_APP_APPID,
//   measurementId: process.env.REACT_APP_MEASUREMENTID,
// };

// init firebase backend
// initFirebaseBackend(firebaseConfig);

function App({ Component, pageProps, ...rest }: any) {

    const { store } = wrapper.useWrappedStore(rest);

    useEffect(() => {
      // Add code here to set the direction of the document based on your logic
      document.documentElement.setAttribute('dir', 'ltr');  //rtl
    }, []);

    return (
        <React.Fragment>
            <Head>
               <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charSet="utf-8" />
               <title>Dosix - Nextjs Admin & Dashboard Template</title>
            </Head>
            <Provider store={store}>
               <Component {...pageProps} />
            </Provider>
        </React.Fragment>
    );
}

export default App;