little notch
Hello ! I render a hello word and I get this error when I' m trying to access to my page. Here is my code
async function getPerson(record: string) {
const res = await fetch(`http://127.0.0.1:8090/api/collections/persons/records/${record}`);
return res.json();
}
export default async function Page() {
return (
<>
<h1>Hello</h1>
</>
);
}``` the filename is called [record].tsx. I' ll appreciate any help
cedar saffron
which directory are you using? app or pages?
[record].tsx is incorrect for the app directory, it should be [record]/page.tsx.
And export default async function Page() { is incorrect for the pages directory, it should be
const Page = () => {
...
export default Page;
little notch
Why the way I used page is false? I followed this documentation https://beta.nextjs.org/docs/data-fetching/fetching#parallel-data-fetching
cedar saffron
which directory are you using?
cedar saffron
then do this:
const Page = () => {
...
export default Page;
nothing about fetching in the pages directory changed. the new documentation is for the app directory
compact panther
async function getPerson(record: string) {
const res = await fetch(`http://127.0.0.1:8090/api/collections/persons/records/${record}`);
return await res.json();
}
res.json() returns a promise.
cedar saffron
in OP's code, getPerson isn't used anywhere, so that isn't the problem. The problem is that there's an async component in the pages directory.
compact panther
Sure, for that issue. Is it wrong to point out an error that they would likely run into later today or tomorrow once they start calling that data?
cedar saffron
There's no need for await there, as res.json() is a Promise and thus has the correct return type for the async function. With await, it waits until the Promise is resolved and then implicitly creates another Promise. There are minor differences between returning with and without await, but nothing that matters.
final flame
I was actually getting the same error in my NextJS 13 app directory, and realized that if I removed use client inside my layout.tsx (the root one) it fixed the issue
brave elk
nothing about fetching in the pages directory changed. the new documentation is ...
Does that means that async server components are only supported by the app directory?
cedar saffron
yes