如何使HTML元素可用于NextJS中的多个页面？

Question

当前,所有代码都在一个函数调用中：

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>
  )
}

我想使 ...

可重用，因为我需要为文档中可导航到的每个链接呈现它，但我还在学习NextJS/JS/CSS等，所以我不明白需要如何构造它。

我尝试制作另一个js文件并创建另一个函数：

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

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

但我不能让它呈现出来。

如何才能做到这一点呢？