Utilizing NextJS to efficiently route requests directly to the backend and send the responses back to the client within the

Question

Utilizing NextJS to efficiently route requests directly to the backend and send the responses back to the client within the

In the technology stack for my project, I am using a Next.js server for the front end and a separate back-end server to handle user data storage.

When a client needs to send a request to the back end, they first make an API request to the Next.js server, which then communicates with the back-end server to retrieve the necessary data.

The challenge I am facing is effectively forwarding these requests from the client to the server and handling the response without losing any data or creating messy code.

Currently, this is the approach I have implemented:

export default function handler(req: NextApiRequest, res: NextApiResponse){
    fetch(url, {
        method: "post",
        body: req.body
     }).then(response => res.status(200).json(response.body))
}

However, one major issue with this solution is that it does not include the necessary headers. While I could manually add specific header fields, this approach is not scalable as there are numerous other fields to consider. I am looking for a more comprehensive way to ensure that all required headers are included.

Important Note: The reason I need to intercept the request is to insert a JWT token for authentication purposes.

javascript typescript next.js

Answer 1

Answer №1

My backend is built in node js and my frontend is using Next.js. I have been implementing this approach and I must say, it has been quite impressive.


    export const resendSingupOtpAction = action({}, async () => {
      const res = await fetch(
        `${process.env.BACKEND_BASE}/users/resend-signup-otp`,
        {
          method: 'POST',
          headers: { ...getAuthorizationHeader() },
        }
      );
    
      if (!res.ok) {
        return getApiError(res);
      }
    
      const { messsage } = await res.json();
      return { success: messsage as string };
    });
   
    export const setSecureJwt = (tkn: string) => {
      cookies().set(COOKIES.JWT, tkn, {
        secure: true,
        httpOnly: true,
        sameSite: true,
      });
    };
    
    export const deleteSecureJwt = () => {
      cookies().delete(COOKIES.JWT);
    };
    
    export const getApiError = async (response: Response) => {
      const data = await response.json();
    
      return {
        error: (data?.message?.length
          ? data.message[0]
          : 'server_error') as string,
      };
    };
    
    export const getAuthorizationHeader = () => {
      const token = cookies().get(COOKIES.JWT)?.value;
      if (!token) return false;
      return { Authorization: 'Bearer ' + token };
    };
    
    
    export const getJsonTypeHeader = () => {
      return { 'Content-Type': 'application/json' };
    };

Answer 2

My backend is built in node js and my frontend is using Next.js. I have been implementing this approach and I must say, it has been quite impressive.


    export const resendSingupOtpAction = action({}, async () => {
      const res = await fetch(
        `${process.env.BACKEND_BASE}/users/resend-signup-otp`,
        {
          method: 'POST',
          headers: { ...getAuthorizationHeader() },
        }
      );
    
      if (!res.ok) {
        return getApiError(res);
      }
    
      const { messsage } = await res.json();
      return { success: messsage as string };
    });
   
    export const setSecureJwt = (tkn: string) => {
      cookies().set(COOKIES.JWT, tkn, {
        secure: true,
        httpOnly: true,
        sameSite: true,
      });
    };
    
    export const deleteSecureJwt = () => {
      cookies().delete(COOKIES.JWT);
    };
    
    export const getApiError = async (response: Response) => {
      const data = await response.json();
    
      return {
        error: (data?.message?.length
          ? data.message[0]
          : 'server_error') as string,
      };
    };
    
    export const getAuthorizationHeader = () => {
      const token = cookies().get(COOKIES.JWT)?.value;
      if (!token) return false;
      return { Authorization: 'Bearer ' + token };
    };
    
    
    export const getJsonTypeHeader = () => {
      return { 'Content-Type': 'application/json' };
    };

Utilizing NextJS to efficiently route requests directly to the backend and send the responses back to the client within the

Answer №1

Similar questions

Issues arising with shadows in THREE.js

What are some ways to adjust the page being served in node.js?

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

Ways to access information from doc.data()

Having trouble with accessing input field in a modal that was generated by TinyMCE React within a Next.JS environment

retain the input data from the form by using the keyup event

Changing Table Cell Color with Bootstrap Based on Value

Having trouble retrieving information from .pipe(map()) method

Leveraging redux within your NEXT.JS project

What are the differences between performing a search in MongoDB (database component) and Node.js (server-side)?

Flask caches JSON files automatically

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

Redux ConnectedProps will always have a type of never

Verifying with VueJS and Jest: How to test if a component's method calls an imported function

Tips for extracting popular song titles from music platforms such as Hungama or Saavn

Tips for managing errors when utilizing pipe and mergemap in Angular

Importing whole sass files or modules in a NextJS page or component

Drag and drop feature malfunctioning - items cling to one another and rearrangement is imprecise

Building a sub route in React Router v4 allows developers to efficiently organize and manage

Ways to attach an item using its lower point instead of its upper coordinate