Next.js 13 and React Crash Course 2023

Explore how API route handlers in Next.js 13 respond to HTTP requests at defined URLs, returning data and supporting GET and POST methods via route.js.

Use Next.js 13 route handlers to fetch books data from a JSON file and expose it via an API route, with Prisma pending for database integration.

Next.js 13 and react crash course demonstrates a books component that fetches data from an API route, renders each book in a card on home page, and links to Amazon.

Adjust book card visuals by resizing images to width 200 and height 150, add line breaks between books, and wrap components in a div to satisfy JSX single-parent requirements.

Learn to build a Next.js 13 books search endpoint that uses url search params to filter books by query or title, returning case-insensitive results.

Add a book by handling a post request, read title, link, and image from the request body, create a new in-memory book with id, update the books array.

Convert a server component to a client component to enable search and interactivity using state and use effect, with client-side data fetching and loading handling.

Add a top search form for book queries, manage a query state, and fetch results from a search API, showing loading and updating the books list.

Create a client add-book component that opens a modal form with a button, using useState to manage the modal and trigger a post request to add a book.

Build an add book form in a modal, wire a text input, handle async submit to an API endpoint, generate a UUID, and reset the form on success.

Refactor the books feature to refresh the list after adding a new book by exposing a refresh books method and using a fetch books function.

Implement a book deletion feature in Next.js by adding a delete button and a dynamic route for book IDs, with an API delete handler and JSON data handling.

Set up a Prisma database with SQLite, define a book model (id: uuid, title, link, image), run migrations, and configure a singleton Prisma client to handle Next.js hot reloading.

Fetch and display books from a prisma database using next.js 13 api routes and server components, including seeding data with prisma create and querying with findMany.

Add a new book to Prisma database using create data for title, link, and image, with Prisma returning UUID and running insert on the server in Next.js 13.

Implement a delete route handler using Prisma to remove a book by id. The handler uses Prisma to delete with a where id clause and confirms generated delete query executes.

Switch the search from a json array to Prisma, using prisma.book.findMany with a where clause where the title contains the query, and define prisma at the top for database access.