Have a common header layout in nextjs

Question

I have 2 pages user.js and nonuser.js and one component header. user.js and nonuser.js have same functionality with slight changes in UI. Now I want to integrate all this. Like when I visit the page by default table of user.js must be viewed. One click of nonuser.js it should change to the nonuser.js table. And I want header to be same for both, content in textbox should not change when I switch between pages.

I'm new to next.js and react

header.js

import React, { Component } from 'react';
import '../Header/header.css';
import { Menu, Input, Icon } from 'antd';
import Link from 'next/link';

class HeaderComponent extends Component {
    render() {
        return (
            <div className="navbar">
                <div className="header">
                    <div className="col-1">

                        <div className="menu">
                            <div>
                                    <Link href="/User"><a>Users</a></Link>
                            </div>
                            <div>
                                <Link href="/nonUser"><a>Non Users</a></Link>
                            </div>
                            <Input className="text-box" placeholder="Enter name" prefix={<Icon type="search" ></Icon>}></Input>

                        </div>
                    </div>
                </div>
            </div>
            )
        }
    }
    export default HeaderComponent

user.js

class User extends Component {
 render() {
        return (
            <React.Fragment>
                   <div className="ant-table-row">
                        <div className="table-head-text">

                            <span className="text">Users({data.length})</span>
                            <Pagination defaultCurrent={1} total={100} />
                        </div>
                        <Table
                            rowKey={data._id}
                            columns={this.columns1}
                            rowSelection={this.rowSelection}
                            onExpand={this.onExpand}
                            dataSource={data} />
                    </div>
         </React.Fragment>
       )
}

I didn't add nonuser component, its same as user component

index.js

import Header from '../components/Header/header';
import Layout from '../components/Layout';
function App() {
 return (
     <Header/>
         <div>

         </div>

 )
}
export default App;

I've done this, On first landing the only header is there and on clicking user link in header, header disappears and only table of user is shown.

EDIT: I tried this header appears in both and I placed a textbox in header .textbox value clears when I switch between pages.

user.js and nonuser.js

 render(){
   return(
            <Layout>
                <div>.....</div>
            </Layout>
    )
 }

Also tried index.js

   render() {
    return (
        <Layout>
            <div>

            </div>
        </Layout>

    )
}

layout.js

const Layout = ({children}) => (


   <div>
     <Header></Header>
     {children}
   </div>

  );

Answer 1

From what I make of your question, you want to use HeaderComponent as a common header for both pages? Then I'd suggest placing it in your components/Layout file. Next will wrap all pages in the layout component, thus adding your header to all pages.

I'm also wondering why you have an index.js file? Unless it's placed in pages/ folder, it isn't something you normally do in Next. The pages user.js and nonuser.js should also be placed in the pages/ folder. Next will then automatically load the to files and provide them under the routes /user and /nonuser (based on the name of the file). This will also make Next wrap each page in the layout component mentioned above.

I'd suggest looking into NextJS learning guide. It provides a very good introduction to NextJS and will make it a lot easier to use NextJS if you. They have a lesson explaining how to use Shared Components which explains exactly what you seem to be looking for.

Hope this helps a bit.

Edit:

Example using _app.js

The following is an example of how to use a custom layout component in next using _app.js. It's based on Nexts own example.

// components/Layout.js
import React, { Component } from 'react';
import Header from './Header';

class Layout extends Component {
  render () {
    const { children } = this.props
    return (
      <div className='layout'>
        <Header />
        {children}
      </div>
    );
  }
}

// pages/_app.js
import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';

export default class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
  }
}

To get more information on how to make use of _app.js properly, check out their documentation on custom app.