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 src with the name pages, and then create a ts file in src/pages with name newpage. After that create a new folder view in src/view in this folder create sub folders for different pages in your project and then import this pages in src/pages .

Example :-

- Hook (or nonauthLayout) Base Components

import React from 'react';
import { Container } from "reactstrap";

import BreadCrumb from "@common/BreadCrumb";

import Head form "next/head";
import nonauthLayout from '@layout/NonAuthLayout';

const NewPage = () => {

return (
  <div>
    <Head>
      <title> New Page | Vixon - Admin & Dashboard Template </title>
    </Head>
    <div className="page-content">
      <Container fluid={true}>
        <Breadcrumbs pageTitle="New Page" title="New Page" />

          //write code here

      </Container>
    </div>
  </div>
);
} 
export default nonauthLayout(NewPage);

- Hooks with ( or withoutLayout) Components

import React from 'react';
import { Container } from "react-bootstrap";
import Head form "next/head";
import withLayout from '@layout/withLayout';
                                      
const NewPage = () => {

return (
  <div>
    <Head>
      <title> New Page | Vixon - Admin & Dashboard Template </title>
    </Head>
    <Container>

      //write code here

    </Container>
  </div>
)
}
                                      
export default withLayout(NewPage);

2. import your page in src/pages from src/view/newPage file.

Example :-

import newPage from "@views/newPage"

const newpage = () => {
  return (
    <NewPage />
  )
}

export default newpage;