如何用NextJS和react Router渲染服务器端的React内容？

npx create-next-app my-app

cd my-app

npm install react-router react-router-dom

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function MyApp({ Component, pageProps }) {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default MyApp;

import React from 'react';

export async function getServerSideProps() {
  // 在这里获取数据并返回给组件
  const data = await fetch('https://api.example.com/data');
  const jsonData = await data.json();

  return {
    props: {
      data: jsonData,
    },
  };
}

function Home({ data }) {
  return (
    <div>
      <h1>Home</h1>
      <p>{data}</p>
    </div>
  );
}

export default Home;

npm run dev