Route error on server side.

Answered

Scissor-tailed Flycatcher posted this in #help-forum

Scissor-tailed FlycatcherOP

2024-02-11T15:47:38.000Z

export default async function UsersTable({
query,
currentPage,
}: {
query: string;
currentPage: number;
}) {
let users: any[] = [];
try {
const response = await fetch('/api/user', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ query, currentPage }),
});
users = await response.json();
console.log(users);
} catch (error) {
console.error('Error Fetching user:', error);
}
return(
......................................./* Here is HTML code */...........................................

}

I have user.js file in pages/api directory.
But if I save above file, it occurs the follow error on server side.

Error Fetching user: TypeError: Failed to parse URL from /api/user
at new Request (node:internal/deps/undici/undici:5855:19)
at R (D:\Workspace\nextjs-tailwind-course-landing-page\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:342709)
... 3 lines matching cause stack trace ...
at async UsersTable (webpack-internal:///(rsc)/./src/components/admin/users/table.tsx:16:26) {
[cause]: TypeError: Invalid URL
at new URL (node:internal/url:775:36)
at new Request (node:internal/deps/undici/undici:5853:25)
at R (D:\Workspace\nextjs-tailwind-course-landing-page\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:342709)
at doOriginalFetch (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/patch-fetch.js:412:24)
at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/patch-fetch.js:537:20)
at async globalThis.fetch (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/patch-fetch.js:216:16)
at async UsersTable (webpack-internal:///(rsc)/./src/components/admin/users/table.tsx:16:26) {
code: 'ERR_INVALID_URL',
input: '/api/user'
}
}

Help me!!!!
Why do I get above error?

Answered by Anay-208

Can you mark the most useful message in this thread as a solution?

View full answer

31 Replies

Nelson

2024-02-11T16:14:30.000Z

Try

const response = await fetch('http://localhost:3000/api/user', {

You need to provide the full path since you're fetching data on the server side.

@Nelson Try tsx const response = await fetch('http://localhost:3000/api/user', { You need to provide the full path since you're fetching data on the server side.

Scissor-tailed FlycatcherOP

2024-02-12T13:37:05.000Z

Thanks, It works well

@Scissor-tailed Flycatcher export default async function UsersTable({ query, currentPage, }: { query: string; currentPage: number; }) { let users: any[] = []; try { const response = await fetch('/api/user', { method: 'GET', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query, currentPage }), }); users = await response.json(); console.log(users); } catch (error) { console.error('Error Fetching user:', error); } return( ......................................./* Here is HTML code */........................................... } I have user.js file in pages/api directory. But if I save above file, it occurs the follow error on server side. Error Fetching user: TypeError: Failed to parse URL from /api/user at new Request (node:internal/deps/undici/undici:5855:19) at R (D:\Workspace\nextjs-tailwind-course-landing-page\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:342709) ... 3 lines matching cause stack trace ... at async UsersTable (webpack-internal:///(rsc)/./src/components/admin/users/table.tsx:16:26) { [cause]: TypeError: Invalid URL at new URL (node:internal/url:775:36) at new Request (node:internal/deps/undici/undici:5853:25) at R (D:\Workspace\nextjs-tailwind-course-landing-page\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:342709) at doOriginalFetch (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/patch-fetch.js:412:24) at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/patch-fetch.js:537:20) at async globalThis.fetch (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/patch-fetch.js:216:16) at async UsersTable (webpack-internal:///(rsc)/./src/components/admin/users/table.tsx:16:26) { code: 'ERR_INVALID_URL', input: '/api/user' } } Help me!!!! Why do I get above error?

joulev

2024-02-12T13:40:02.000Z

[do not fetch your own api routes in server components](https://nextjs-faq.com/fetch-api-in-rsc)

Scissor-tailed FlycatcherOP

2024-02-12T13:40:29.000Z

then how should I do?

joulev

2024-02-12T13:41:11.000Z

read the link for more info.
tldr: move the api route logic inside the server component directly

Scissor-tailed FlycatcherOP

2024-02-12T13:47:17.000Z

Sorry, but I am not sure yet

@Scissor-tailed Flycatcher Sorry, but I am not sure yet

Anay-208

2024-02-12T13:49:38.000Z

did you read the info in the url which joulev sent? I recommend you to read that

Scissor-tailed FlycatcherOP

2024-02-12T13:51:40.000Z

what links? I can't see

Anay-208

2024-02-12T13:51:51.000Z

https://nextjs-faq.com/fetch-api-in-rsc

Scissor-tailed FlycatcherOP

2024-02-12T13:54:49.000Z

Actually I don't understand well

@Scissor-tailed Flycatcher Actually I don't understand well

Anay-208

2024-02-12T14:00:05.000Z

In simple terms, It decreases the speed of the application if you do this. Here is what you should do.
route.ts

// ...
export async function GET(request: Request) {
  // Do some actions like fetch from db
const data = await db.fetch();
  return new NextResponse({success: true}) 
}

for example if this is your code, and this is your
page.tsx

"use server";
// ...
export default function Page({ query }){
const data = await fetch("/api")
return <>{data.success}</>
}

You should change page.tsx to

"use server";
//...
export default function Page({ query }){
// Do Some actions like fetch from db
const data = await db.fetch()
return <>{data.success}</>
}

@Scissor-tailed Flycatcher

Scissor-tailed FlycatcherOP

2024-02-12T14:03:35.000Z

So you mean..
I shouldn't call api on server component, instead of that, I can access to db on server component directly.
right?

Anay-208

2024-02-12T14:03:58.000Z

yes

But don't access on client component

on client component, use fetch on server/api components, directly use db functions

If you're issue is resolved, mark any message which helped you the most in this thread

Scissor-tailed FlycatcherOP

2024-02-12T14:06:13.000Z

Good, got it.
ah~I understand now.
In this opportunity, May I ask you question?

Anay-208

2024-02-12T14:06:32.000Z

Yup

Scissor-tailed FlycatcherOP

2024-02-12T14:07:33.000Z

I am new in Next.js so I am not sure about the difference between client component and server component yet.
Could you explain surely?:)

Anay-208

2024-02-12T14:08:43.000Z

Client components are components which are executed on the client.

Server components are components which are executed on server side, and is useful for Server Side Rendering(SSR).

Scissor-tailed FlycatcherOP

2024-02-12T14:12:32.000Z

okay.
Let me try to change api logic as your guide.
After it works well, I will be again here.
Thanks for your support very much.
I am Oskar Mast from Switzerland. and you?

@Scissor-tailed Flycatcher okay. Let me try to change api logic as your guide. After it works well, I will be again here. Thanks for your support very much. I am Oskar Mast from Switzerland. and you?

Anay-208

2024-02-12T14:13:36.000Z

#help-forum is specifically reserved for asking help. You can ask that in #off-topic

If you're issue is resolved, mark any message which helped you the most in this thread

Scissor-tailed FlycatcherOP

2024-02-12T14:13:59.000Z

sorry, okay

@Scissor-tailed Flycatcher sorry, okay

Anay-208

2024-02-12T14:15:23.000Z

Can you mark the most useful message in this thread as a solution?