Next.js：'use client'与glob库兼容问题及Gallery透明度设置故障

问题根源 #

Gallery.tsx依赖glob获取本地图片路径，属于仅能在服务端运行的组件，而标记为客户端组件的page.tsx直接向其传递客户端状态（isSearching）会触发渲染冲突——服务端组件无法访问客户端的动态交互状态。

修复步骤 #

1. 拆分Gallery组件 #

将Gallery.tsx拆分为服务端数据获取部分和客户端样式控制部分：

服务端组件：GalleryServer.tsx

仅负责获取图片路径：

// app/ui/GalleryServer.tsx
import glob from 'glob';

export default async function GalleryServer() {
  const images = await glob('public/images/**/*.{jpg,png}', { absolute: false });
  return images.map(img => ({ src: img.replace('public/', '/') }));
}

客户端组件：Gallery.tsx

接收isSearching状态控制样式，渲染服务端获取的图片：

// app/ui/Gallery.tsx
'use client';

type GalleryProps = {
  images: { src: string }[];
  isSearching: boolean;
};

export default function Gallery({ images, isSearching }: GalleryProps) {
  return (
    <div 
      className="gallery"
      style={{ opacity: isSearching ? 0.5 : 1, transition: 'opacity 0.3s ease' }}
    >
      {images.map((img, idx) => (
        <img key={idx} src={img.src} alt="Gallery item" className="gallery-item" />
      ))}
    </div>
  );
}

2. 修改page.tsx #

在客户端组件中先调用服务端组件获取图片数据，再传递给客户端Gallery组件：

// app/page.tsx
'use client';

import { useState } from 'react';
import SearchBar from './ui/SearchBar';
import Gallery from './ui/Gallery';
import GalleryServer from './ui/GalleryServer';

export default async function Home() {
  const images = await GalleryServer();
  const [isSearching, setIsSearching] = useState(false);

  return (
    <div className="home">
      <SearchBar 
        onFocus={() => setIsSearching(true)}
        onBlur={() => setIsSearching(false)}
      />
      <Gallery images={images} isSearching={isSearching} />
    </div>
  );
}

3. 完善SearchBar组件 #

确保组件能正确触发焦点状态变更：

// app/ui/SearchBar.tsx
'use client';

type SearchBarProps = {
  onFocus: () => void;
  onBlur: () => void;
};

export default function SearchBar({ onFocus, onBlur }: SearchBarProps) {
  return (
    <input
      type="text"
      placeholder="搜索..."
      onFocus={onFocus}
      onBlur={onBlur}
      className="search-bar"
    />
  );
}

关键说明 #

• 服务端组件仅处理数据获取，不涉及客户端交互逻辑；
• 客户端组件接收服务端预取的数据和本地状态，负责样式渲染与交互控制；
• 客户端组件内调用服务端组件时，数据会在服务端提前获取后传递给客户端，避免跨环境的props传递冲突。

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