Next.js伺服器端渲染中是否有使用useState的方式？

Question

我想從客戶端取得一個值，並在伺服器端使用它，

但是我不知道如何使用useState，並且我知道在伺服器端沒有使用useState的方法 那麼有沒有其他解決方案可以代替呢？ ！ 實際上，在伺服器端有一個url，我想從客戶端取得值，並在該url中使用${}。

Answer 1

您可以透過將客戶端的值透過請求、查詢參數或API端點傳遞給伺服器來實現您的目標。

客戶端：

import { useState } from 'react';

const MyComponent = () => {
  const [myValue, setMyValue] = useState('');

  const handleSubmit = () => {
    fetch(`/api/myEndpoint?value=${encodeURIComponent(myValue)}`)
      .then((response) => response.json())
      .then((data) => {
        // 如果需要，可以对从服务器返回的数据进行处理
        console.log(data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

  return (
    <div>
      <input value={myValue} onChange={(e) => setMyValue(e.target.value)} />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
};

伺服器端：

export default function handler(req, res) {
  const { value } = req.query;

  // 使用从客户端接收到的'value'

  res.status(200).json({ message: `接收到的值：${value}` });
}