我建立了一个新的“next.js”项目，并希望开始编码，但我现在被下面的错误消息困了几个小时。
我已经采取了一个参考代码开始如下-

import styled from "styled-components";

function Sidebar() {
    return {

        <Container> 
            <h1> Sidebar </h1>
        </Container>

    }
}

export default sidebar;

const Container = styled.div;

这是错误：

x Unexpected token `< (jsx tag start)`. Expected identifier, string literal, numeric literal or [ for the computed key   
   ,----
 7 | <Container>
   : ^
   `----

当然，我做了我的谷歌研究，并在不同的配置文件修补。有很多不同的解决方案，但没有一个适合我（到目前为止）。我的猜测是，这与babel配置有关。但我在黑暗中摸索。
我的.babelrc文件：

{
  "presets": ["env"],
  "plugins": [
    ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
    "transform-object-rest-spread",
    // "@babel/plugin-proposal-nullish-coalescing-operator", // TODO: update to babel 7
  ],
}

看看这方面的指导。