Vexel NextJS Typescript – Premium React Bootstrap Admin Template

Main Layout

Basic Layout Structure

General nextjs component structure of the Vexel template.

Root:shared/layout-components/layout/contentlayout

Vexel Layout Structure

The following _app.tsx 'All layouts present in the project will be listed in the _app.tsx file, and those layouts can be used globally in all companies utilizing the project'

Example Dashboard.layout = "Contentlayout"

Root:pages/_app.tsx

		
			import "../styles/globals.scss";
			import Contentlayout from "@/shared/layout-components/layout/contentlayout";
			import Authenticationlayout from "@/shared/layout-components/layout/authenticationlayout";
			import Landinglayout from "@/shared/layout-components/layout/landinglayout";
			
			const layouts = {
				Contentlayout: Contentlayout,
				Authenticationlayout: Authenticationlayout,
				Landinglayout: Landinglayout,
			};
			function App({ Component, pageProps }) {
				const Layout = layouts[Component.layout] || ((pageProps) =><Component>{pageProps}</Component>);
				return (
					<Layout>
					<Component {...pageProps} />
					</Layout>
				);
			}
			export default App;