下面是我的React页面：

import { motion } from "framer-motion";
import styled from "styled-components";

const Outer = styled(motion.div)`
  height: 100vh;
  display: flex;
  place-items: center;
  background-color: #232323;
`;

const Inner = styled(motion.div)`
  height: 100px;
  width: 100px;
  background-color: cadetblue;
  border-radius: 5px;
`;

const Framer = () => (
  <Outer>
    <Inner>
      Hey
    </Inner>
  </Outer>
);

export default Framer;

它位于next.js应用程序中的/pages文件夹下。
对于<Inner>Hey</Inner>，它运行得很好，但是将其更改为<Inner />，在服务器上渲染时，它始终提供Uncaught TypeError: Cannot read property 'textContent' of null。
在我开始处理next.js时，这一直是一个问题。它阻碍了我的生产。
错误在next.js@9.2.0和next.js@9.1.7上重现

<Outer>
  <h1>Hey</h1>
  <Inner />
</Outer>

用上面的代码测试过了，渲染效果很好。看起来next.js页面需要一点文本！