React Nextjs

📄Page Structure

import "@assets/scss/custom.scss";
import React, { ReactElement, ReactNode } from "react";
import Head from "next/head";
import { Provider } from "react-redux";
import { wrapper } from "../toolkit/index";

import { AppProps } from "next/app";
import type { NextPage } from "next";

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

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};
const MyApp: any = ({ Component, pageProps, ...rest }: AppPropsWithLayout) => {
  const { store } = wrapper.useWrappedStore(rest);
  const getLayout = Component.getLayout || ((page) => page);
  
return (
    <>
      <Head>
        <link rel='icon' href='/favicon.svg' />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {/* <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"></link> */}
        <title>LightAble | Next js & Admin Dashboard </title>
      </Head>
      <Provider store={store}>
        {getLayout(<Component {...pageProps} />)}
      </Provider>
    </>
  );
};

export default MyApp;

Layout settings

/ data-pc-theme
export enum THEME_MODE {
    LIGHT = "light",
    DARK = "dark",
    DEFAULT = "default",
}

//data-pc-layout
export enum LAYOUT_THEME {
    VERTICAL = "vertical",
    HORIZONTAL = "horizontal",
    VERTICAL_TAB = "vertical-tab",
    MODULER = "moduler",
}

// data-pc-sidebar-theme
export enum SIDEBAR_THEME {
    LIGHT = "light",
    DARK = "dark"
}

// data-pc-sidebar-caption
export enum SIDEBAR_THEME_CAPTION {
    CAPTION_SHOW = "true",
    CAPTION_HIDE = "false"
}

// data-pc-preset
export enum THEME_PRESET {
    PRESET_1 = "preset-1",
    PRESET_2 = "preset-2",
    PRESET_3 = "preset-3",
    PRESET_4 = "preset-4",
    PRESET_5 = "preset-5",
    PRESET_6 = "preset-6",
    PRESET_7 = "preset-7",
    PRESET_8 = "preset-8",
    PRESET_9 = "preset-9",
    PRESET_10 = "preset-10",
}

export enum THEME_LAYOUT {
    LTR = "ltr",
    RTL = "rtl",
} 

```
AttributeDescription

data-pc-preset= "preset-1"

To set the your primary theme color you can change ['preset-1' to 'preset-10'] for different color.

data-pc-sidebar-theme = "light"

To set the Light color left Sidebar.

data-pc-sidebar-theme = "dark"

To set the Light color dark Sidebar.

data-pc-sidebar-caption = "true"

To set the caption on.

data-pc-sidebar-caption = "false"

To set the caption off.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-direction = "rtl"

To set the layout direction right to left.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousNext.js ComponentsNextCredits

Last updated