Next.js 13.4.1中styled-components按钮SSR Hydration失败问题求助

问题根源 #

Next.js 13 App Router默认组件为服务器组件，而styled-components依赖客户端React上下文注入样式，同时JSX注释语法错误、缺少SSR配置也会导致服务端与客户端渲染结果不一致。

解决步骤 #

• 标记组件为客户端组件
  在Nav.tsx文件最顶部添加'use client';，显式声明该组件运行在客户端环境，让styled-components能正常处理样式注入：

  'use client';
  import React from 'react';
  import styled from 'styled-components';
  
  interface ButtonProps {
    $primary?: boolean;
  }
  
  const Button = styled.button<ButtonProps>`
    background: red;
  `;
  
  // ... 其余组件代码
  

• 修正JSX注释语法
  JSX中不支持//单行注释，需替换为{/* 注释内容 */}，避免语法错误导致渲染异常：

  <Button>Primary Button</Button> {/* this one */}
  

• 配置Next.js支持styled-components SSR
  在项目根目录的next.config.js中启用styled-components编译器配置，确保服务端渲染时能正确生成并注入样式：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    compiler: {
      styledComponents: true,
    },
  };
  
  module.exports = nextConfig;
  

完成以上修改后，重启npm run dev，服务端将正确渲染Button组件，hydration不匹配的错误即可解决。

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