Page

Place to create partial section elements from routing pages.

Overview

Consider page-specific components (page), If there are components that are specific to a particular page, it is better to keep them within the page directory. This can help to keep the code organized and make it easier to understand the relationships between the components and the pages they belong to.

How to use

If you are going to create a web page that applies only to the project then you can use this method.

Step 1: Create routing page index

The first step you have to create a index file page. Folder in src/pages

pages
└── index.tsx

Step 2: Create page-specific component

The next step is to create some files that are used for the partial design of the page. Folder in src/components/page

components/page
└── Homepage
    └── index.tsx

Regarding naming conventions folder components, you can use <page name>page with capitalize.

Step 3: Import page component

In the routing page we will import the related page component that was separated earlier. code can be put in pages/index.tsx

// 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;
PreviousGlobalNextLayouts

Last updated