Next.js新手技术问询：如何配置getServerSideProps实现点击触发外部API POST请求

Hey there! Let's start with a critical clarification: getServerSideProps can't be triggered by a frontend button click. This function runs on the server only when your page is requested (e.g., when a user loads or refreshes the page) — it's not designed to respond to user interactions like button clicks.

For your user registration flow, you have two solid options depending on your security needs:

Option 1: Direct Client-Side POST Request (Simplest) #

You can send the POST request directly from your component's signup method using fetch (or a library like Axios). First, you'll need to update your component to track form inputs in state (since your current code references firstname, lastname, etc., but doesn't get them from anywhere).

Here's the revised component code:

import { Component } from 'react';

class Signup extends Component {
  constructor(props) {
    super(props);
    // Initialize state to track form inputs
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
      password: ''
    };
  }

  // Handle input changes to update state
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  signup = async (e) => {
    e.preventDefault(); // Prevent default form submission behavior
    const { firstName, lastName, email, phone, password } = this.state;

    try {
      const response = await fetch('YOUR_EXTERNAL_REGISTER_API_URL', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // Add any required auth headers here (if needed)
        },
        body: JSON.stringify({
          firstName,
          lastName,
          email,
          phone,
          username: email, // Reuse email as username per your code
          password
        })
      });

      if (!response.ok) {
        throw new Error('Registration failed');
      }

      const data = await response.json();
      // Handle successful registration (e.g., redirect, show success message)
      console.log('Registration successful:', data);
    } catch (error) {
      // Handle errors (e.g., show error message to user)
      console.error('Error during registration:', error);
    }
  };

  render() {
    const { firstName, lastName, email, phone, password } = this.state;
    return (
      <div>
        {/* Add form inputs bound to state */}
        <input
          type="text"
          name="firstName"
          value={firstName}
          onChange={this.handleInputChange}
          placeholder="First Name"
        />
        <input
          type="text"
          name="lastName"
          value={lastName}
          onChange={this.handleInputChange}
          placeholder="Last Name"
        />
        <input
          type="email"
          name="email"
          value={email}
          onChange={this.handleInputChange}
          placeholder="Email"
        />
        <input
          type="tel"
          name="phone"
          value={phone}
          onChange={this.handleInputChange}
          placeholder="Phone"
        />
        <input
          type="password"
          name="password"
          value={password}
          onChange={this.handleInputChange}
          placeholder="Password"
        />
        <button onClick={this.signup}>Register</button>
      </div>
    );
  }
}

// You don't need getServerSideProps for this flow
export default Signup;

Option 2: Use a Next.js API Route (More Secure) #

If your external API requires sensitive credentials (like an API key) that you don't want to expose to the client, create a Next.js API Route as a middleman. This way, the request to the external API happens on the server, keeping secrets safe.

Step 1: Create the API Route #

Create a file at pages/api/register.js with this code:

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  try {
    const response = await fetch('YOUR_EXTERNAL_REGISTER_API_URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // Add sensitive headers (e.g., API keys) here — they won't be exposed to the client
        // 'Authorization': `Bearer ${process.env.EXTERNAL_API_KEY}`
      },
      body: JSON.stringify(req.body)
    });

    if (!response.ok) {
      throw new Error('External API request failed');
    }

    const data = await response.json();
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
}

Step 2: Update Your Component to Call the API Route #

Modify your signup method to send the request to /api/register instead of the external API directly:

signup = async (e) => {
  e.preventDefault();
  const { firstName, lastName, email, phone, password } = this.state;

  try {
    const response = await fetch('/api/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        firstName,
        lastName,
        email,
        phone,
        username: email,
        password
      })
    });

    if (!response.ok) {
      throw new Error('Registration failed');
    }

    const data = await response.json();
    console.log('Registration successful:', data);
  } catch (error) {
    console.error('Error during registration:', error);
  }
};

Key Takeaways #

• Forget using getServerSideProps for button-click triggered actions — it's meant for pre-rendering data when the page loads.
• Use the client-side fetch approach for simple cases where no sensitive data is needed.
• Use an API Route if you need to protect credentials or handle server-side logic before calling the external API.

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