Next.js服务器组件中用Link控制图片显隐的实现方案

我是React和Next.js新手，编写了服务器组件页面展示Palpedia列表，期望点击列表中的Link元素时显示对应图片（当前以chikipi.png测试）。尝试用useState钩子实现交互，但因页面是服务器组件无法使用客户端钩子；添加"use client"指令也未解决问题。

原代码展示 #

import Link from 'next/link';
import Image from 'next/image';


async function getPalpedia() {
  const response = await fetch(`http://localhost:3000/api/palpedia`, {
    method: "GET",
  })
  return response.json();
}

export default async function palpedia() {
  const palpediaJSON = await getPalpedia();
  const palpedia = JSON.stringify(palpediaJSON)

  return (
    <div>
      <div className="fixed z-20 top-[4rem] bottom-0 right-[max(0px,calc(50%-58rem))] w-[15.5rem] py-10 overflow-y-auto hidden xl:block">
        {palpediaJSON.map((pal) => (
          <div className="palInfo" key={pal.id}>
            <Link href="#">{pal.name}</Link>
            <p>Types: {pal.types.join(", ")}</p>
            <p>HP: {pal.hp}</p>
            <p>ATK: {pal.atk}</p>
            <p>DEF: {pal.def}</p>
          </div>
        ))}
      </div>
      <div className="overlay">
      <Image id="chikipi" src="/chikipi.png" width={0} height={0} alt="Chikipi" />
      </div>
    </div>
  );
}

代码错误与不良实践 #

• 冗余变量未使用：定义了palpedia = JSON.stringify(palpediaJSON)但全程未调用，属于无效代码，增加不必要的性能开销。
• Image组件参数错误：width和height设为0会导致图片完全无法渲染，Next.js的Image组件需要有效的尺寸值才能正常显示。
• Link组件不符合交互需求：href="#"会触发页面跳转（回到顶部），违背了“点击显示图片”的预期，且未阻止默认行为。
• 服务器组件误用客户端逻辑：当前页面是服务器组件（async函数组件），无法直接使用useState等客户端钩子；直接添加"use client"会和服务器组件的async数据获取逻辑冲突，因为客户端组件不能是async函数。

解决方案 #

1. 拆分客户端组件处理交互 #

将需要状态管理和交互的部分（图片展示、点击事件）拆分为单独的客户端组件，服务器组件只负责静态数据渲染：

// PalImageViewer.js
'use client';

import { useState } from 'react';
import Image from 'next/image';

export default function PalImageViewer() {
  // 初始化默认显示测试图
  const [selectedImage, setSelectedImage] = useState('/chikipi.png');

  // 处理点击事件，更新选中的图片
  const handlePalSelect = (imagePath) => {
    setSelectedImage(imagePath);
  };

  return {
    handlePalSelect,
    // 返回图片查看器的JSX
    viewer: (
      <div className="overlay">
        <Image
          src={selectedImage}
          width={300}
          height={300}
          alt="Selected Pal"
          className="pal-image"
        />
      </div>
    )
  };
}

2. 修改服务器组件，整合客户端逻辑 #

服务器组件负责获取数据、渲染列表，并调用客户端组件的交互方法：

// 页面组件（服务器组件）
import PalImageViewer from './PalImageViewer';

async function getPalpedia() {
  const response = await fetch(`http://localhost:3000/api/palpedia`, {
    method: "GET",
  });
  // 增加错误处理，避免请求失败时崩溃
  if (!response.ok) {
    throw new Error('Failed to load Palpedia data');
  }
  return response.json();
}

export default async function Palpedia() {
  const palpediaJSON = await getPalpedia();
  // 初始化客户端组件，获取交互方法和视图
  const { handlePalSelect, viewer } = PalImageViewer();

  return (
    <div>
      <div className="fixed z-20 top-[4rem] bottom-0 right-[max(0px,calc(50%-58rem))] w-[15.5rem] py-10 overflow-y-auto hidden xl:block">
        {palpediaJSON.map((pal) => (
          <div className="palInfo" key={pal.id}>
            {/* 用可点击span替代Link，避免页面跳转 */}
            <span
              onClick={() => handlePalSelect(`/${pal.image}.png`)} // 假设每个pal对象有image字段
              className="cursor-pointer text-blue-500 underline hover:text-blue-700"
            >
              {pal.name}
            </span>
            <p>Types: {pal.types.join(", ")}</p>
            <p>HP: {pal.hp}</p>
            <p>ATK: {pal.atk}</p>
            <p>DEF: {pal.def}</p>
          </div>
        ))}
      </div>
      {/* 渲染图片查看器 */}
      {viewer}
    </div>
  );
}

3. 修复细节问题 #

• 删除冗余的palpedia变量，保持代码整洁。
• 给Image组件设置合理的宽高值，或使用fill属性配合父容器样式实现响应式显示。
• 若坚持使用Link组件，需添加onClick={(e) => e.preventDefault()}阻止默认跳转行为，再绑定点击事件。

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