title: Navigation in Sidebar not working using Next.js
body: <p>I am trying a sidebar using Next.js but the code is in React format, I just tried to copy this and convert it to Next.js. It is not going to any links in the navigation</p>
  <p>Also why the contents is not showing on the right, can someone please help. I have posted the <code>_app.js</code> file at the bottom</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import {SidebarData} from './SidebarData'
  import {Row} from 'react-bootstrap'
  import {useRouter} from 'next/router'
  
  export default function Sidebar() {
  
      const router = useRouter()
  
      return (
          &lt;div className=&quot;Sidebar&quot;&gt;
              &lt;ul className=&quot;SidebarList&quot;&gt;
                  {SidebarData.map((val, key) =&gt; {
                      return ( 
                          &lt;li 
                              key={key} 
                              className=&quot;row&quot;
                              id={router.pathname == val.link ? &quot;active&quot; : &quot;&quot;}
                              onClick={()=&gt; {
                                  router.pathname = val.link
                              }}
                          &gt;                   
                              &lt;div id=&quot;icon&quot;&gt;{val.icon}&lt;/div&gt; 
                              &lt;div id=&quot;title&quot;&gt;{val.title}&lt;/div&gt;
                          &lt;/li&gt;
                          
                      )   
                  })}
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import HomeIcon from '@material-ui/icons/Home';
  import FormatListNumberedRtlIcon from '@material-ui/icons/FormatListNumberedRtl';
  import NoteIcon from '@material-ui/icons/Note';
  import DateRangeIcon from '@material-ui/icons/DateRange';
  import TrendingUpIcon from '@material-ui/icons/TrendingUp';
  import PollIcon from '@material-ui/icons/Poll';
  import PieChartIcon from '@material-ui/icons/PieChart';
  import Link from 'next/link'
  
  export const SidebarData = [
      {
  
          title: &quot;Home&quot; ,
          icon: &lt;HomeIcon /&gt;,
          link: &quot;/home&quot;
  
      },
      {
  
          title: &quot;Categories&quot; ,
          icon: &lt;FormatListNumberedRtlIcon /&gt;,
          link: &quot;/categories&quot;
  
      },
      {
  
          title: &quot;Records&quot; ,
          icon: &lt;NoteIcon /&gt;,
          link: &quot;/records&quot;
  
      },
      {
  
          title: &quot;Monthly Income&quot; ,
          icon: &lt;PollIcon /&gt;,
          link: &quot;/charts/monthly-income&quot;
  
      },
      {
  
          title: &quot;Monthly Expense&quot; ,
          icon: &lt;PollIcon /&gt;,
          link: &quot;/charts/monthly-expense&quot;
  
      },
      {
  
          title: &quot;Trend&quot; ,
          icon: &lt;TrendingUpIcon /&gt;,
          link: &quot;/charts/trend&quot;
  
      },
      {
  
          title: &quot;Breakdown&quot; ,
          icon: &lt;PieChartIcon /&gt;,
          link: &quot;/charts/category-breakdown&quot;
  
      }
  ]
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import '../styles/globals.css'
  import 'bootstrap/dist/css/bootstrap.min.css';
  import &quot;@fortawesome/fontawesome-svg-core/styles.css&quot;; // import Font Awesome CSS
  import { config } from &quot;@fortawesome/fontawesome-svg-core&quot;;
  config.autoAddCss = false;
  import Sidebar from '../components/Sidebar'
  
  function MyApp({ Component, pageProps }) {
      return (
          &lt;&gt;
              &lt;div className=&quot;App&quot;&gt;
                  &lt;Sidebar&gt;
                      &lt;Component {...pageProps} /&gt;
                  &lt;/Sidebar&gt;
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  
  export default MyApp
  </code></pre>
  <p>How can I show the content of the other pages at the middle?</p>