Create New Page

How to Create a New Page

Here is the example on how to create your custom page and add it to the leftsidebar menu, breadcrumbs and also meta tag.

1. Create a new folder in `/pages`. ex. NewPage, and then create a js file in `pages/NewPage` with name `index.tsx`

Example :-

As you know, there are 2 different types of layouts, first is Blank Layout and second is Full layout.

- if you want to make your page blank layout, then you need to wrap your page's content with <Container fluid={false}>

- if you want to make your page with full layout, then you need to wrap your page's content with <div className="page-content"><div> tag and <Container fluid={true}>
Add Breadcrumbs component. it's a common component, it's used to add breadcrumbs in your page.

- You have to pass 2 props here, first is breadcrumb and second is breadcrumbItem.

- the breadcrumb prop refers to page breadcrumb and the breadcrumbItem refers to page's breadcrumb item's title.
Add MetaTags to give a title to your page.

- With Layout

import React, { ReactElement } from 'react';
import Head from 'next/head';
import { Container } from 'react-bootstrap';
import Breadcrumb from '@common/Breadcrumb';
import Layout from '@common/Layout';

const newPage = () => {
    return (
        <React.Fragment>
            <Head>
                <title>newPage | Hybrix - Admin & Dashboard Template</title>
            </Head>
            <div className="page-content">
                <Container fluid={true}>
                    <Breadcrumb breadcrumb="Pages" breadcrumbItem="newPage" />
                    // write Typescript Code Here.
                </Container>
            </div>
        </React.Fragment >
    );
}

newPage.getLayout = (page: ReactElement) => {
    return (
      <Layout>
        {page}
      </Layout>
    )
};

export default newPage;;

- Without layout

import React from 'react';
import Head from 'next/head';
import NonAuthLayout from '@common/Layout/NonAuthLayout';
import { Container } from 'react-bootstrap';
import Link from 'next/link';

const newPage = () => {
    return (
        <React.Fragment>
            <Head>
                <title>newPage | Hybrix - Admin & Dashboard Template</title>
            </Head>
            <section>
                <Container fluid={false}>
                // write Typescript Code Here.
                </Container>
            </section>
        </React.Fragment >
    );
}

newPage.getLayout = function getLayout(page: any) {
    return (
      <NonAuthLayout>
        {page}
      </NonAuthLayout>
    )
};

export default newPage;

2. Add a navigation in the layouts

For more details, check the Navigation page to see how to add menu item in your template.

For Vertical Layout :- Components/Common/Layout/VerticalLayouts/index.tsx
For Horizontal Layout :- Components/Common/Layout/HorizontalLayout/index.tsx
For Two Column Layout :- Components/Common/Layout/TwoColumnLayout/index.tsx

Create New Page

How to Create a New Page

1. Create a new folder in /pages. ex. NewPage, and then create a js file in pages/NewPage with name index.tsx

2. Add a navigation in the layouts

1. Create a new folder in `/pages`. ex. NewPage, and then create a js file in `pages/NewPage` with name `index.tsx`