Next js中的嵌套路由

我有一个简单的SPA，App和About组件如下所示。当我单击“关于”链接时，“关于”页面将显示在链接下方。问题是，当我单击“关于我”链接时，将加载“我”页面而不是关于页面。我真正想要的是在nextjs中嵌套路由。似乎一级路由正在加载中。但是我不知道如何将其添加到我的子组件中。

import App, { Container } from 'next/app'
import React from 'react'
import Link from 'next/link'
class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }
  render() {
    const { Component, pageProps } = this.props
    return <Container>
      <ul>
        <li><Link href="/news">News</Link></li>

        <li><Link href="/about">About</Link></li>
      </ul>
      <Component{...this.props} />
    </Container>
  }
}
export default MyApp


import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
class About extends React.Component {
  render() {
    return (
      <div id="main">
        <li><Link href="/about/company">About company</Link></li>
        <li><Link href="/about/me">About me</Link></li>

      </div>

    )
  }
}
export default About