Next.js中不通过动态路由将前端输入传入getServerSideProps

getServerSideProps 是在服务器端渲染阶段执行的，和前端浏览器环境完全隔离，没法直接从前端组件传值过去。要实现需求，得通过HTTP请求参数把输入值传递给服务器，触发页面重新渲染时让getServerSideProps读取这个参数。最直接的方式是用URL的query参数。

1. 修改子组件 StartingPageContent，通过路由传递输入值 #

在子组件里，点击translate按钮时，把输入值作为query参数加到当前页面的URL上，触发页面重新请求服务器：

// components/StartingPageContent.js
import { useRouter } from 'next/router';
import { useState } from 'react';

export default function StartingPageContent({ initialData, initialInput }) {
  const router = useRouter();
  const [inputValue, setInputValue] = useState(initialInput || '');

  const handleTranslate = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;

    // 跳转到当前页面，携带query参数
    router.push({
      pathname: '/',
      query: { input: inputValue }
    });
  };

  return (
    <div>
      <form onSubmit={handleTranslate}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入内容..."
        />
        <button type="submit">Translate</button>
      </form>

      {initialData && (
        <div className="result">
          <h3>查询结果:</h3>
          <pre>{JSON.stringify(initialData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

2. 修改Home页面的getServerSideProps，读取query参数并查询数据 #

在pages/Home.js里，从context.query中获取输入值，调用fetchDBData查询，然后把结果和输入值作为props返回：

// pages/Home.js
import StartingPageContent from '../components/StartingPageContent';
import { fetchDBData } from '../utils/mongodb';

export default function Home({ queryResult, inputValue }) {
  return (
    <div>
      <StartingPageContent 
        initialData={queryResult} 
        initialInput={inputValue} 
      />
    </div>
  );
}

export async function getServerSideProps(context) {
  // 从URL query中获取输入值
  const { input } = context.query;
  let queryResult = null;

  if (input) {
    // 根据实际需求转换参数类型（比如示例中需要数字类型）
    const inputNum = parseInt(input, 10);
    queryResult = await fetchDBData(inputNum);
  }

  return {
    props: {
      queryResult,
      inputValue: input || ''
    }
  };
}

3. 保持MongoDB查询逻辑不变 #

你的fetchDBData函数不需要改动，只要能接收参数并返回findOne的结果即可：

// utils/mongodb.js
export async function fetchDBData(id) {
  // 假设已实现MongoDB连接逻辑
  const db = await getMongoDBConnection();
  return db.collection('your-collection').findOne({ id: id });
}

补充说明 #

• 使用URL query的核心原因是：这种方式会触发Next.js的服务端重新渲染，让getServerSideProps重新执行并读取新的参数。
• 子组件的initialInput用来保持输入框值与URL参数一致，避免页面刷新后输入框清空。
• 如果不想让参数显示在URL中，可以改用POST请求（将form的method设为POST），然后在getServerSideProps的context.req中读取POST数据，但GET方式更适合这类查询场景。

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