Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Bug no Codigo do Professor Aula 4 Curso de Next.js: conheça o framework React

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();

1 resposta
solução!

Consegui resolver.

Par quem estiver usando as versões mais atualizadas de ambos o Next e o json-server: Segue o gabarto:

import Image from "next/image";
import styles from "./page.module.css";
import { CardPost } from "@/components/CardPost";
import logger from "@/logger";
import { useSearchParams } from "next/navigation";
import Link from "next/link";

async function getAllPosts(page) {
  const response = await fetch(
    `http://localhost:3042/posts?_page=${page}&_per_page=6`
  );
  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({ searchParams }) {
  const currentPage = searchParams?.page || 1;
  const { data: posts, prev, next } = await getAllPosts(currentPage);
  return (
    <main className={styles.grid}>
      {posts.map((post) => (
        <CardPost key={post.id} post={post} />
      ))}
      <div className={styles.links}>
        {prev && <Link href={`/?page=${prev}`}>Página anterior</Link>}
        {next && <Link href={`/?page=${next}`}>Próxima página</Link>}
      </div>
    </main>
  );
}

E lembre-se de abrir o json server da seguinte forma:

npx json-server -w db.json -p 3042

Mudei o nome do arquivo posts.json para db.json

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software