Javascript – Is there a way to return data and refresh the page with a server action and Next.js

To simplify the process of getting data from the server action in Next.js and to handle page refreshing or redirection after the server action, you can use the getServerSideProps function and leverage the res.redirect method. Here’s an updated version of your code:

// page.tsx

import { useRouter } from 'next/router';
import React, { useState } from 'react';
import { SendTicket } from '@/actions/TicketAction';

export default function TicketPage() {
  const router = useRouter();
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await SendTicket({ name, age });
      // Redirect to another page after the server action
      router.push('/success');
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <main>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Your name"
        />
        <input
          type="number"
          value={age}
          onChange={(e) => setAge(parseInt(e.target.value))}
          placeholder="Your age"
        />
        <button type="submit">Valider</button>
      </form>
    </main>
  );
}

// TicketAction.ts

export interface TicketInformationProps {
  name: string;
  age: number;
}

export async function SendTicket(TicketInformation: TicketInformationProps) {
  console.log(`[NEW TICKET]`);
  console.log(`Nom: ${TicketInformation.name}`);
  console.log(`Age: ${TicketInformation.age.toString()}`);
  console.log(`nnn`);

  // Process the data and return the result
  const result = `You are ${TicketInformation.name} and you are ${TicketInformation.age.toString()} yo.`;

  return result;
}

With these updates:

1. In page.tsx, the handleSubmit function is modified to handle the form submission. It prevents the default form submission behavior, calls the SendTicket function asynchronously, and then redirects to the /success page using router.push('/success').

2. In TicketAction.ts, the SendTicket function processes the data and returns the result directly instead of setting cookies. The result will be passed as a prop to the /success page.

To handle the result and display it on the /success page, you can modify the /success page as follows:

// success.tsx

import React from 'react';
import { GetServerSideProps } from 'next';

interface SuccessProps {
  result: string;
}

export default function SuccessPage({ result }: SuccessProps) {
  return <p>{result}</p>;
}

export const getServerSideProps: GetServerSideProps<SuccessProps> = async () => {
  // Fetch the result from the server action
  const result = await SendTicket({ name: 'example', age: 25 });

  // Pass the result as a prop to the SuccessPage
  return {
    props: {
      result,
    },
  };
};

In the updated /success page, the getServerSideProps function fetches the result by calling the SendTicket function with example data. The result is then passed as a prop to the SuccessPage, which can be accessed and displayed using props.result.

By using getServerSideProps and redirecting the user to another page, you can simplify the process of getting data from the server action, refresh the page after the action, and redirect the user to a different page as needed.