NextJS 13 server component fetch not hitting my API endpoint

Question

I am using NextJS 13 with the app router. This is the file structure of my project.


async function fetchForm(id: string) {
    const endpoint = `${process.env.NEXT_PUBLIC_URL}/api/paymo/${id}`
    console.log("endpoint: ", endpoint);
    const response = await fetch(endpoint, {
        next: { revalidate: 0 }
    });
    return await response.json();
}

const FormPage = async (
    { params }: { params: { id: string } }
) => {

    const id = params.id;
    const data = await fetchForm(id);

    console.log("data: ", data);

In my app/protected/paymo/viewer/[id]/page.tsx, I am trying to fetch data from my API. My NEXT_PUBLIC_URL has been set to http://localhost:3000 and on the console, it prints

endpoint: http://localhost:3000/api/paymo/clixw3o9u0005uma24m605z33


export async function GET(
    request: Request,
    { params }: { params: { id: string } }
) {

    const paymoId = params.id;

    console.log(`GET /api/paymo/${paymoId}`);

    console.log("API PAYMO GET");

In my app/api/paymo/[id]/route.ts, I am trying to log if the endpoint has been hit.

When I render the FormPage component, "API PAYMO GET" is not getting logged. My API endpoint isn't getting hit.
Interestingly, when I paste "http://localhost:3000/api/paymo/clixw3o9u0005uma24m605z33" into my browser URL, it prints "API PAYMO GET", and returns the JSON content properly.

How do I fix my FetchForm so that it properly hits the API endpoint?

I pasted "http://localhost:3000/api/paymo/clixw3o9u0005uma24m605z33" into my browser URL, it prints "API PAYMO GET", and returns the JSON content properly. However, fetching content using fetchForm function doesn't work.

Hi there. Can you post your page.tsx or whatever component is calling using fetchForm? — L. Nelson, Jun 16 '23 at 22:05
`FormPage` is a React Server Component. It only runs on the server, so you can add your API logic directly there. — juliomalves, Jun 24 '23 at 16:30

score 0 · Answer 1 · answered Jun 16 '23 at 22:05

I suspect this is a form submission handler, so its being processed on the client side.

Client Side components do not have access to process which is a node.js api.

You can use the exported environment variable NEXT_PUBLIC_URL which likely is accessible in the browser at __URL. I might think about a more descriptive name than url.

One other way to get the url client side is to use window.location.origin

NextJS 13 server component fetch not hitting my API endpoint

1 Answers1