Customized
This section provides guidance on laying out a customized page.
Overview
Customized layout is a user interface design that is tailored to the specific needs and preferences of a particular user or group of users. It is often used in software applications, websites, and other digital products to provide a personalized experience that meets the unique requirements of each user.
How to use
Here we use customized layout. The installation method is as follows below.
Customized layout component is split into several sections:
Header
: Component which represents the main navigation bar of the layout.Main
: Contains the content of each page and all prop passed from the page component.Footer
: Component which represents the footer of the layout.
Step 1: Create the layout split component
First, create a few new files in src/layouts/CustomizedLayout
directory. This will be the parent folder component that wraps around each component layout.
layouts/CustomizedLayout
├── Header
│ ├── <another split code>
│ └── index.tsx
├── Main
│ ├── <another split code>
│ └── index.tsx
├── Footer
│ ├── <another split code>
│ └── index.tsx
└── index.tsx
import React from "react";
interface Props {
children?: React.ReactNode;
}
const Header: React.FC<Props> = ({ children = <p>Header</p> }) => {
return <header>{children}</header>;
};
export default Header;
import React from "react";
interface Props {
children: React.ReactNode;
}
const Main: React.FC<Props> = ({ children }) => {
return <main>{children}</main>;
};
export default Main;
import React from "react";
interface Props {
children?: React.ReactNode;
}
const Footer: React.FC<Props> = ({ children = <p>Footer</p> }) => {
return <footer>{children}</footer>;
};
export default Footer;
In each split it can be chunked again into smaller code sections.
Step 2: Create the parent layout component
Next, create a new file for parent layout component, such as index.tsx
, also in your src/layouts/CustomizedLayout
directory.
// Vendors
import React from "react";
// Components
import Header from "./Header";
import Main from "./Main";
import Footer from "./Footer";
interface CustomizedLayoutProps extends React.PropsWithChildren<{}> {
// Add any other props your component needs
}
const CustomizedLayout = (props: CustomizedLayoutProps) => {
return (
<>
<Header />
<Main>{props.children}</Main>
<Footer />
</>
);
};
export default CustomizedLayout;
Step 3: Create the Page Component
Next, create a new file for your page component, such as index.tsx
, also in your src/components/page/Homepage
directory. This component will be wrapped by the CustomizedLayout
component.
// Vendors
import React from 'react';
const Homepage = () => {
return (
<>
Homepage
</>
);
}
export default Homepage;
Step 4: Add the Page to Your App
Finally, create a new file for your page component, such as index.tsx
, also in your src/pages
directory.
// Vendors
import React from 'react';
import Head from "next/head";
import type { ReactElement } from "react";
import type { NextPageWithLayout } from "./_app";
// Layouts
import CustomizedLayout from "@/layouts/CustomizedLayout";
// Components
import Homepage from "@/components/page/Homepage";
const Home: NextPageWithLayout = () => {
return (
<>
<Head>
<title>Create Tokenomy App</title>
<meta name="description" content="Generated by create tokenomy app" />
</Head>
<Homepage />
</>
);
}
Home.getLayout = function getLayout(page: ReactElement) {
return <CustomizedLayout>{page}</CustomizedLayout>;
};
export default Home;
Last updated