使用@emotion/styled构建Next.js组件时出现Server Error的问题排查与解决求助

我来帮你排查这个Server Error的问题，看了你的代码后，发现几个明确的错误点，这些都是导致服务端报错的常见原因：

1. CSS语法错误（最直接的报错原因） #

在LogoBox的styled样式定义里，padding:10px后面漏掉了分号，这会导致CSS解析失败，服务端渲染时直接抛出语法错误：

// 错误写法
padding:10px
// 修正后
padding:10px;

2. 未定义的bold变量 #

你在Text组件中使用了fontWeight={bold}，但这个bold变量既没有定义，也没有从Chakra UI导入。Chakra的fontWeight属性接受字符串（如'bold'）或数字（如700），需要改成：

// 错误写法
fontWeight={bold}
// 修正后
fontWeight="bold"

3. Next.js Link组件的冗余标签（可选优化） #

如果你的项目是Next.js 13+的App Router，Link组件不需要再包裹<a>标签，直接把内容放在Link内部即可；如果是Pages Router，虽然可以保留<a>，但官方更推荐直接用Link包裹内容，减少冗余代码。

修正后的完整代码 #

import Link from "next/link";
import Image from "next/image";
import { Text, useColorModeValue } from "@chakra-ui/react";
import { styled } from "@emotion/styled"

const LogoBox = styled.span`
  font-weight: bold;
  font-size: 18px;
  display: inline-flex;
  align-items:center;
  height: 30px;
  line-height:20px;
  padding:10px; /* 补上缺失的分号 */
  &:hover img {
    transform:rotate(20deg);
  }
`

const Logo = () => {
  const dragonImg = `/images/dragon${useColorModeValue('', '-dark')}.png`
  return (
    <Link href="/">
      <LogoBox>
        <Image src={dragonImg} width={20} height={20} alt="logo" />
        <Text 
          color={useColorModeValue('gray.800', 'whiteAlpha.900')} 
          fontFamily="M PLUS Rounded 1c" 
          fontWeight="bold" /* 替换未定义的bold变量 */
          ml={3}
        > pokmon</Text>
      </LogoBox>
    </Link>
  )
}

export default Logo;

额外小提示 #

如果你日常主要使用Chakra UI，其实可以直接用Chakra的Box组件配合sx属性实现样式，不需要额外引入Emotion，这样更贴合Chakra的生态：

import { Box } from "@chakra-ui/react";

// 用Chakra Box替代Emotion styled的写法
const LogoBox = (props) => (
  <Box
    as="span"
    fontWeight="bold"
    fontSize="18px"
    display="inline-flex"
    alignItems="center"
    height="30px"
    lineHeight="20px"
    padding="10px"
    _hover={{ img: { transform: 'rotate(20deg)' } }}
    {...props}
  />
)

内容的提问来源于stack exchange，提问作者Rohit Jambhulkar