Next.js中如何将组件输入值传递到getServerSideProps用于搜索接口请求

核心逻辑 #

getServerSideProps是服务端运行的方法，无法直接获取客户端组件内的状态，最优方案是将搜索关键词作为URL查询参数携带跳转到搜索结果页，getServerSideProps可以直接从请求上下文中读取URL参数完成接口调用。该方案天然支持搜索结果页分享、书签保存、浏览器前进后退导航，不需要引入额外的状态管理工具，实现成本最低。

代码修改 #

SearchBar 组件 #

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function SearchBar() {
  const [keyword, setKeyword] = useState('');
  const router = useRouter();

  const handleClick = (event) => {
    event.preventDefault();
    if (!keyword.trim()) return;
    // 跳转时将关键词作为查询参数传入，使用encodeURIComponent处理特殊字符
    router.push(`/SearchResults?keyword=${encodeURIComponent(keyword.trim())}`);
  };
  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入搜索关键词"
      />
      <button onClick={handleClick}>Fetch</button>
    </div>
  );
}

SearchResults 页面 #

import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
  // 从查询参数中获取关键词
  const keyword = context.query.keyword as string;
  // 无关键词时可返回404或者重定向到首页
  if (!keyword) {
    return {
      notFound: true
    }
  }
  const res = await fetch(
    `https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(keyword)}`
  );
  const data = await res.json();

  // 将接口返回的数据传递给页面组件
  return { props: { searchResult: data || [] } };
};

// 页面组件接收props渲染搜索结果
export default function SearchResults({ searchResult }) {
  return (
    <div>
      <h1>搜索结果</h1>
      <ul>
        {searchResult.items?.map(book => (
          <li key={book.id}>{book.volumeInfo.title}</li>
        ))}
      </ul>
    </div>
  );
}

方案优势 #

• 实现简单，不需要引入全局状态管理、本地存储等额外逻辑
• 搜索结果页可直接通过URL访问，支持用户分享、保存书签
• 符合浏览器原生导航逻辑，前进后退可正常恢复之前的搜索结果
• 对SEO友好，搜索引擎爬虫可直接抓取带参数的搜索结果页

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