Create Tokenomy App

> For the complete documentation index, see [llms.txt](https://tokenomy.gitbook.io/boilerplate-code/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tokenomy.gitbook.io/boilerplate-code/features/components/page.md).

# Page

## 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.&#x20;

### 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`

```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;
```