api error
Unanswered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
i have a api route at src/app/pages/api/index.js not when i try to fetch its giving 404 error
49 Replies
@Blanc de Hotot i have a api route at src/app/pages/api/index.js not when i try to fetch its giving 404 error
it has to be
src/pages/api/index.js@joulev it has to be `src/pages/api/index.js`
Blanc de HototOP
same error
@Blanc de Hotot same error
try to access
localhost:3000/api, what does it show?@joulev try to access `localhost:3000/api`, what does it show?
Blanc de HototOP
the data i sent
so index is main file ?
can i move page.js and layout ro pages as well?
will empty app
will empty app
do you want to use app dir or pages dir
@joulev it has to be `src/pages/api/index.js`
this is the pages dir
app dir equivalence is
src/app/api/route.jsBlanc de HototOP
on app/api doesn't work so imma use pages
@Blanc de Hotot on app/api doesn't work so imma use pages
if you want to use the app directory, you have to restructure your api routes https://nextjs.org/docs/app/building-your-application/routing/router-handlers
Blanc de HototOP
oki thanks!
Blanc de HototOP
let user = await fetch("/api/github").then((res) => res.json());
im using this but it says failed to get url from
but when i do http://localhost:3000/api/github it works
im using this but it says failed to get url from
but when i do http://localhost:3000/api/github it works
any solution
Blanc de HototOP
thanks!
Blanc de HototOP
"use client";
export default async function Npm() {
let user = await fetch("/api/npm").then((res) => res.json());
console.log(user);
let str = `cDreamBoy's NPM stats`;
return (
<div className="w-full h-full flex flex-col">
<div className="w-full pl-[20px] text-[#9745f5] font-bold">{str}</div>
<div className="w-full flex flex-row">
<div className="mt-[5px] ml-[22px] w-[40%] flex flex-col">
<div className="font-bold text-[10pt] flex flex-row items-center gap-[5px]">
<img className="w-[15px] h-[15px]" src="package.png" />
<span>Packages: </span>
</div>
</div>
</div>
</div>
);
}error: failed to parse url
MAN, sorry IM SO WEAK IN this
next version: 13.4.7 ig
@Blanc de Hotot js
"use client";
export default async function Npm() {
let user = await fetch("/api/npm").then((res) => res.json());
console.log(user);
let str = `cDreamBoy's NPM stats`;
return (
<div className="w-full h-full flex flex-col">
<div className="w-full pl-[20px] text-[#9745f5] font-bold">{str}</div>
<div className="w-full flex flex-row">
<div className="mt-[5px] ml-[22px] w-[40%] flex flex-col">
<div className="font-bold text-[10pt] flex flex-row items-center gap-[5px]">
<img className="w-[15px] h-[15px]" src="package.png" />
<span>Packages: </span>
</div>
</div>
</div>
</div>
);
}
error: failed to parse url
in a client component:
* remove the async keyword
* use react-query or swr
* remove the async keyword
* use react-query or swr
@joulev in a client component:
* remove the async keyword
* use react-query or swr
Blanc de HototOP
im using swr, it gives undefined
"use client";
import useSWR from "swr";
const fetcher = (...args) => fetch(...args).then((res) => res.json());
export default function Git() {
const { data, error } = useSWR("/api/github", fetcher);
console.log(data, error);
let user = data;
let str = `${user.data.login}'s Github Stats`;
return (
);
}but im using "use client", it worked before
💀
@Blanc de Hotot js
"use client";
import useSWR from "swr";
const fetcher = (...args) => fetch(...args).then((res) => res.json());
export default function Git() {
const { data, error } = useSWR("/api/github", fetcher);
console.log(data, error);
let user = data;
let str = `${user.data.login}'s Github Stats`;
return (
);
}
initially it will be undefined and isLoading is true; after the data is fetched in the browser then the value will be populated and isLoading becomes false
you can use that isLoadng to make a loading state
Blanc de HototOP
@joulev its good, but the problem is the next js is not loading my component as client side
even if i use "use client" its still loading it as server side component
it is prerendered on the server just like all other client components
Blanc de HototOP
i tested console.log(window, document) none of them were avaliable, i
of course... they are prerendered on the server
you can only log and use window and document in event handlers, useEffect and similar place
Blanc de HototOP
it was working in 13.4.5 so it changed ig
no, it never changed
it has been like this since nextjs v0.1.0
Blanc de HototOP
useEffect(() => {
console.log(window);
});maybe its a bug ?
undefined
@Blanc de Hotot js
useEffect(() => {
console.log(window);
});
maybe its a bug ?
this works then, it should print the window object
@Blanc de Hotot undefined
you need to show me a reproduction repo then
Blanc de HototOP
it is not
"use client";
import React from "react";
export default function Alert(message, i = true) {
let el = document.createElement("div");
el.innerText = message;
el.className = `w-[90%] text-black rounded-[25px] p-[5px] mb-[5px] mr-[5px] ${
i ? "bg-[#00ff00]" : "bg-[#ff0000]"
}`;
// el.classList.add("alert");
document.getElementById("alertBox").appendChild(el);
el.classList.add("alert");
setTimeout(() => {
el.classList.add("alertGo");
setTimeout(() => {
el.remove();
}, 500);
}, 4000);
return;
/* return (
<div className="fixed w-[60%] b-0 h-[20px] bg-indigo-100">{message}</div>
);*/
}code from 13.4.5
working like butter
@joulev you need to show me a reproduction repo then
Blanc de HototOP
how ?
@Blanc de Hotot js
"use client";
import React from "react";
export default function Alert(message, i = true) {
let el = document.createElement("div");
el.innerText = message;
el.className = `w-[90%] text-black rounded-[25px] p-[5px] mb-[5px] mr-[5px] ${
i ? "bg-[#00ff00]" : "bg-[#ff0000]"
}`;
// el.classList.add("alert");
document.getElementById("alertBox").appendChild(el);
el.classList.add("alert");
setTimeout(() => {
el.classList.add("alertGo");
setTimeout(() => {
el.remove();
}, 500);
}, 4000);
return;
/* return (
<div className="fixed w-[60%] b-0 h-[20px] bg-indigo-100">{message}</div>
);*/
}
code from 13.4.5
this shouldn't work; probably you have things like isMounted and only load this component after the page has mounted
but ah well, i have other things to do now, you will need to request help from someone else
Blanc de HototOP
oki
thanks for the help
Blanc de HototOP
"use client";
export default function Repos({ user }) {
return <main>{user.data}</main>;
}
export async function getServerSideProps() {
let data = await fetch("/api/github").then((res) => res.json());
console.log(data);
return {
props: {
user: data,
},
};
}im not getting server props
Blanc de HototOP
nvm