How to make HTML element available for multiple pages in Nextjs?

Question

I am trying to make a site that has a table of contents with links on the left hand side, contents of each section in the middle, then an overview on the right. General concept:

Currently all of the code is in one function call:

import React from 'react';
import styles from '../styles/Home.module.css'
import table_of_contents from './test.js'

export default function Home() {
  return (
    <div className={styles.grid_container}>
      <div className={styles.left_pane}>
        <h3>1. Overview</h3>
          <div className={styles.subsection_nav_link}>
            <p>1.1 Hey</p>
            <p>1.2 Hey</p>
          </div>
        <h3>2. Hey</h3>
        <div className={styles.subsection_nav_link}>
          <h4>2.1 Hey</h4>
          <div className={styles.subsection_nav_link}>
            <p>2.1.1 Hey</p>
            <p>2.1.2 Hey</p>
            <p>2.1.3 Hey </p>
          </div>
          <h4>2.2 Hey</h4>
          <h4>2.3 Hey</h4>
          <div className={styles.subsection_nav_link}>
            <p>2.3.1 Hey</p>
            <p>2.3.2 Hey</p>
          </div>
          <h4>2.4 Hey</h4>
        </div>
        <h3>3. Hey</h3>
        <div className={styles.subsection_nav_link}>
            <p>3.1 Hey</p>
            <p>3.2 Hey</p>
            <p>3.3 Hey</p>
            <p>3.4 Hey</p>
        </div>
        <h3>4. Hey</h3>
          <h4>4.1 Hey</h4>
          <h4>4.2 Hey</h4>
          <h4>4.3 Hey</h4>
          <div className={styles.subsection_nav_link}>
            <p>4.3.1 Hey</p>
            <p>4.3.2 Hey (BT)</p>
            <p>4.3.3 Hey</p>
            <p>4.3.4 Hey</p>
            <p>4.3.5 Hey</p>
            <p>4.3.6 Hey</p>
          </div>
      </div>  
        
      <div className={styles.center_pane}>
        <h2>Center Pane</h2>
        <p>HeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHey</p>
      </div>
      <div className={styles.right_pane}>
        <h2>Right Pane</h2>
      </div>
      <div className={styles.footer}>
        Test
      </div>
  </div>
  )
}

I want to make the <div className={styles.left_pane}>...</div> reusable as I need it to be rendered for each link in the document that can be navigated to but I am still learning Nextjs/js/CSS etc. so I don't understand how this needs to be structured.

I tried making another js file and creating another function:

import React from 'react';
import styles from '../styles/Home.module.css'

export default function table_of_contents () {
  return (the div here)

but I could not get it to render.

How can this be done?

Answer 1

I would put the "navbar" in a seperate file. I would make a folder called components and put this in there. Than you should create a seperate component called Layout and put the navbar in there with all the children that it will receive see the code below: `

import NavBar from "./NavBar";

const Layout = ({ children }) => {

return (
    <div>
      <NavBar />
      {children}
    </div>
  );
};

export default Layout;

Than go to your _app.js file and wrap your layout around everything, see the code below:

import "../styles/globals.css";

import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
 }

export default MyApp;

This is my first post on stackoverflow sorry if explanation isn't clear. Let me know if you need more information.