next.js 使用默认路由（next/router） 如何做到侧栏路由+内容区域切换的功能呢？

Question

next.js 有内置的Layout 和next/router，

很想得到一个：
侧栏路由 + 内容区（页面，可依据路由切换）的demo：

大致是如下即可做到：

next.js + antd（Menu）

我阅读next.js的官网: router并没有找到有类似：
react-router-dom 的 <Routes> 这样的功能（放置在内容区域，可进行页面切换）。

Answer 1

// pages/_app.js
import '../styles/globals.css';
import 'antd/dist/antd.css';
import { Layout, Menu } from 'antd';
import Link from 'next/link';
import { useRouter } from 'next/router';

const { Header, Content, Sider } = Layout;

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
            onClick={({ key }) => {
              router.push(key);
            }}
          >
            <Menu.Item key="/page1">页面1</Menu.Item>
            <Menu.Item key="/page2">页面2</Menu.Item>
            <Menu.Item key="/page3">页面3</Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Component {...pageProps} />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default MyApp;

// pages/page1.js
function Page1() {
  return <div>这是页面1</div>;
}

export default Page1;

// pages/page2.js
function Page2() {
  return <div>这是页面2</div>;
}

export default Page2;

// pages/page3.js
function Page3() {
  return <div>这是页面3</div>;
}

export default Page3;