Durante a Aula 4 o professor Vinicius nos trás o exemplo de desconstruir a resposta do json server. Mas infelizmente, além de não reconhecer, o Next.js não compila ou renderiza o Código, alguém poderia me ajudar? Trecho do código até antes de "quebrar":
import Image from "next/image";
import styles from "./page.module.css";
import { CardPost } from "@/components/CardPost";
import logger from "@/logger";
async function getAllPosts(page) {
const response = await fetch(
`http://localhost:3042/posts?_page=${page}&_per_page=6_start=1&_limit=6_link`
);
if (!response.ok) {
logger.error("Ops, alguma coisa correu mal");
console.log(response);
}
logger.info("Posts obtidos com sucesso");
console.log(response);
return response.json();
}
export default async function Home() {
const posts = await getAllPosts(1);
return (
<main className={styles.grid}>
{posts.map((post) => (
<CardPost key={post.id} post={post} />
))}
</main>
);
}
Trecho do código após o instrutor alterar, e apresentar quebra:
import Link from "next/link"
export default async function Home() {
const { data: posts, prev, next } = await getAllPosts(1)
return (
<main className={styles.grid}>
{posts.map(post => <CardPost key={post.id} post={post} />)}
{prev && <Link href={`/?page=${prev}`}>Página anterior</Link>}
{prev && <Link href={`/?page=${next}`}>Próxima página</Link>}
</main>
)
}
Ao tentar usar a desconstrução do const { data: posts, prev, next} = await getAllPosts(1);
O Código não renderiza mais nenhum post, além de dizer que é undefined o posts.map();