next js and typescript project 102

Community feedback

• 

  22-22•100

  @22-22

  Posted 6 months ago

  Hello,

  Congratulations on your solutions! I recently finished the same challenge and got a very useful comment about the api request. I can see you are fetching first from the client to your server, and then fetching again from your server to an external api (I was doing the same). You are doing everything correctly in route.ts but if you need to execute a function on the server you can also use Server Actions. So instead of route.ts, in actions.ts file you can make a fetch POST request to the external api.

  // /app/actions.ts
  "use server";
  
  const externalApiUrl = "https://cleanuri.com/api/v1/shorten";
  
  export async function shorten(url: string) {
    try {
      const externalResponse = await fetch(externalApiUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ url }),
      });
      const urlsData = await externalResponse.json();
      return urlsData;
    } catch (error) {
      console.error("Error forwarding request:", error);
      return { error: "Failed to fetch data from the external API" };
    }
  }
  

  and instead of making another fetch in your Main component, you can directly call your action:

  "use client";
  
  ...
  
    const [isPending, startTransition] = useTransition();
  
    async function handleSubmit(event: FormEvent<HTMLFormElement>) {
      
      startTransition(() => {
        // Call Server Action
        const result = await shorten(url);
        ...
      });
    }
  
    return (
      <form onSubmit={handleSubmit}>
        <button>{isPending ? "Submitting..." : "Shorten it!"}</button>
      </form>
    );
  }
  

  I was also recommended to use the libs for form validation, react-hook-form or formik, they are very helpful to track everything.

  I hope you'll find it helpful!

  02

  Marked as helpful