Next.js Discord

Discord Forum

ERR INVALID URL

Unanswered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
hello there...
i am fetching data from api/files but nextjs gives error that this /api/files is invalid url
Error
{      
  code: 'ERR_INVALID_URL',
  input: '/api/files'
}

Deps
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",

Hierarchy 
- app
  - api
    - files-upload
    - files (This route has GET export)
  - (root)
    - [type]
      - page.tsx (Here i'm fetching data)

Usage in [type]/page.tsx
const res = await fetch(`/api/files`);
const data = (await res.json()) as API_FIlesReturn;

and if i use full url then browser shows infinite page loading e.g.
const res = await fetch(`http://localhost:3000/api/files);

Console
if i run this code in console, it gives me desired result without any error
(async () => {
  const res = await fetch('/api/files');
  console.log(await res.json());
})();

77 Replies

Argente Brun
Hey you have tried ./api/files?
or@
Western paper wasp
Where in page.tsx are you making this fetch call?

If this code is executed as part of server rendering of this component, you might get an error like that because relative URLs don’t exist in the server environment, only in the browser
The server has no context of the URL on which code is being executed, so it’s not clear on the server what url should be resolved when you fetch to /api/files
If you want the API route’s code to run as part of server rendering, I would use a function call instead of an API route

If you want it to only happen on the client, you can initiate the fetch in an effect
but any fetches you make on the server will require a fully qualified URL
only client-side fetches can resolve relative URLs like that
Giant AngoraOP
Hi @Western paper wasp
thx for your precious time. i know at server it does not make sense to pass only /api/files. i defined full url even with new URL() but in this case browser shows infinite loading and infinite requests at server as i can see in vscode terminal
e.g.
const res = await fetch(new URL('/api/files', siteConfig.siteUrl));
on the client, u can use relative url
Giant AngoraOP
i need to use same backend functionality in 2 components so thats why i created route handler
@Giant Angora i need to use same backend functionality in 2 components so thats why i created route handler
gin
u can strip out your operations in a rsc component
u would have getData() in data.tsx and route.tsx and page.tsx uses getData() separately to achieve the same result
Giant AngoraOP
i am using Appwrite and i need to use appwrite code in rs and client component so thats why i created a route hanlder. but know i have added direct code in rsc to avoid extra round trip
using your functions directly is the way
so issue solved?
Giant AngoraOP
now i am chatting with Appwrite community to resolve how to integrate Clerk with Appwrite as i need to run some server code at client and Appwrite provides client sdk and this skd requires active session
what u use appwrite for?
@gin appwrite has a node sdk aswell
Giant AngoraOP
yeah node sdk needs active session to work in client components
ive used appwrite in the past
const sdk = require("node-appwrite");

let client = new sdk.Client();
client
  .setEndpoint(process.env.APPWRITE_ENDPOINT)
  .setProject(process.env.APPWRITE_PROJECT_ID)
  .setKey(process.env.APPWRITR_KEY)
  .setSelfSigned();

let storage = new sdk.Storage(client);

export async function ApprWriteStorage() {
  return storage;
}
this is how i did it
AppWriteStorage is async and returns the storage object
@gin create a session
Giant AngoraOP
but Appwrite community said i must have active user session to do this
export const createSessionClient = async () => {
  const client = new Client()
    .setEndpoint(appwriteConfig.endpointUrl)
    .setProject(appwriteConfig.projectId);

  const session = (await cookies()).get('appwrite-session');

  if (!session || !session.value) throw new Error('No Session');

  client.setSession(session.value);

  return {
    get account() {
      return new Account(client);
    },
    get databases() {
      return new Databases(client);
    },
  };
};
this client.setSession(session.value) is problem for me... as i am using clerk and now i need to say good bye to clerk
gin
u manage your users in appwrite and auth with clerk?
Giant AngoraOP
i dont manage users in appwrite
i only handle auth with clerk
gin
so what is appwrite for´?
Giant AngoraOP
is it backend as service
i am confused
what to use and dont
@Giant Angora is it backend as service
gin
ok so, u dont need to expose anything from the appwrite sdk to the client
Giant AngoraOP
i am only web front end developer. should i only use appwrite
gin
basically u handle everything for appwrite in your route handlers
this way u elminate authentcation for appwrite
Giant AngoraOP
i am using Hono js for routes
gin
serverside
@Giant Angora i am using Hono js for routes
gin
ok no problem ->
- user uploads file to /api/upload
- /api/upload uploads to appwrite
no session is needed
u can manage your session with clerk
between your api and client
you can use a api key from appwrite with full admin access since it always stays on server
Giant AngoraOP
yeah i did same
i used const {userId} = auth() to check either user is logged or not
but i want to strip extra round trip... first i send request to api/file-upload and then this routes send request to appwrite.
gin
yea
Giant AngoraOP
i want to strip this api/file-upload request
gin
i think its not possible, u would need to manage authentication for appwrite aswell then
its more complicated and slow
the extra trip doesnt impact perfomance
Giant AngoraOP
okay... and what should i do if i need to use same server code in 2 components... one is rs and other is client
gin
for client u place your rsc code in a route handler, the rest u keep it simple
Giant AngoraOP
i didnt get it...
gin
what code are u reffering to?
if its only to retrieve data u can pass the data from a rsc to a client component
Giant AngoraOP
i am taking about files search functionality
for search i use same backend code i added in rsc
file search from appwrite or what
Giant AngoraOP
appwrite
gin
u can get the file urls in a rsc and pass it down as a object to your client
are u using appwrite just for files?
Giant AngoraOP
yeah only for files storage
gin
selfhosted?
Giant AngoraOP
no
gin
oh okay
Giant AngoraOP
i got a solution from appwrite community... on clerk signup create a user in appwrite with webhook and use that user to create session to use appwrite in client component
and its time say good bye to clerk
thats very bad
dont do that xD
Giant AngoraOP
yeah... i will never do this... i will use appwrite auth