NextJS 13 and React Crash Course: Build a Full Stack NextJS 13 App with React, Tailwind and Prisma backend by Lim Greg

Author:Lim, Greg
Language: eng
Format: epub
Published: 2023-08-20T00:00:00+00:00

Code Explanation

In this component, we import 'Link' from 'next/link', as we want to provide a link to each book's Amazon page.

async function getBooks() {

const res = await fetch("http://localhost:3000/api/books");

const json = await res.json();

return json;

}

Next, we'll define an async function getBooks to fetch the books. The endpoint we're fetching from is the one where we have our books, and we'll parse the response as JSON.

const Books = async () => {

const books = await getBooks();

return(

<div>

<h1>Books</h1>

</div>

)

}

Inside the Books component, we'll call getBooks using 'await' since it's asynchronous. Consequently, this part of the code also needs to be labeled as 'async'.

Mapping through the books array

We'll then map through the books array. Each book will be displayed using a 'Card' component from Daisy UI.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.