Next.js 13 and React Crash Course 2023

Name: Next.js 13 and React Crash Course 2023
Rating: 4.6 (54 reviews)

Build a Full Stack NextJS 13 App with React, Tailwind and Prisma backend

Created byGreg Lim

Last updated 6/2023

English

What you'll learn

Learn key NextJS 13 features like App Directory Structure, Routing, React Server Components vs Client components, Layouts and more.
Learn how to build client-side, server-side, fullstack ReactJS apps with NextJS.
Build a practical hands-on project without all the fluff.
Learn NextJS even if you are a beginner in a weekend.

Course content

4 sections • 32 lectures • 2h 27m total length

Introduction2:34
Explore Next.js 13's latest features, including the app directory, React server components, layouts, and API routes, then build a full-stack portfolio app with Prisma and GitHub API data.
Setup2:33
Create a next.js project using create next app after confirming node is installed, configure options (no TypeScript, tailwind CSS, app router), and open in vscode. Then run the dev server with npm run dev to view the default landing page at localhost:3000.
File Structure, HomePage and DaisyUI4:07
Explore the project file structure with Next.js 13 and Tailwind CSS, install DaisyUI for ready-made components, and create a home page component using a Tailwind-styled primary button.
Routing System and Nested Routes4:25
Layouts3:26
Learn how Next.js 13 layouts use a root layout.js to wrap pages with html and body and a shared header and footer, with route-specific layouts like about or login.
Metadata API2:26
Leverage the metadata API to define page titles, descriptions, and keywords in the layout, and customize metadata per page to optimize SEO on Google.
Navigation Bar3:01
Customize the header navigation by replacing anchors with next/link, remove the submenu, and add home, about, contact, and a GitHub users search link, with potential refactoring into a header component.
React Server Components and Client Components3:57
Explore React server components and client components in Next.js, highlighting faster initial loads, smaller client bundles, and SEO-friendly metadata, with backend access and data safety considerations.
Data Fetching5:04
Rendering GitHub Users8:34
Dynamic Routes and Params Prop3:33
Build dynamic routes in Next.js by linking to an internal user repos page using /github-users/[username], extracting the username from params to render the user's repos.
Repos Component9:01
Create a repos component to fetch and list a user's GitHub repositories. Take a user prop and render repo name, id, node id, and description in a table.
Loading Page3:49
learn to create a loading page in Next.js 13 by adding a Loading.js component, display a spinner or loading text, and simulate delays to show the loader before data appears.
Caching and Revalidating2:43

API Route Handlers3:45
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.
Serving Books Data4:40
Fetching Books Data6:42
Slight Adjustment1:20
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.
Getting Search Params7:33
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.
Adding a New Book2:36
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.
Refactor Server to Client Component4:41
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.
Search Component9:27
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.
AddBook Component7:59
Calling the AddBook EndPoint10:48
Refreshing Books After Adding3:59
Deleting a Book9:05
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.

Setting Up Prisma Database5:38
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.
Getting Books From Prisma Database4:12
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.
Adding a Book into Prisma Database2:17
Deleting from Prisma Database1:15
Searching from Prisma Database2:31
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.

Requirements

React knowledge is recommended. But the course includes a React starter book.
No previous NextJS knowledge is required

Description

In this course, we take you on a fun, hands-on and pragmatic journey to learning Next.js 13 development. You'll start building your first Next.js app within minutes. Every section is recorded in a bite-sized manner and straight to the point as I don’t want to waste your time (and most certainly mine) on the content you don't need.

In this course, we will cover:

1. Introduction and Setup
2. File Structure, HomePage and Using Daisy UI
3. Routing System and Nested Routes
4. Layouts
5. Metadata API
6. Navigation Bar
7. React Server Components vs Client Components
8. Data Fetching
9. Rendering GitHub Users
10. Dynamic Routes and Params Prop
11 Repos Component
12. Loading Page
13. Caching and Revalidating
14. API Route Handlers
15. Serving Books Data
16. Fetching Books Data
17. Slight Adjustment
18. Getting Search Params
19. Adding a New Book
20. Refactor Server to Client Component
21. Search Component
22. AddBook Component
23. Calling the Add Book End Point
24. Refreshing Books After Adding
25. Deleting a Book
26. Setting up Prisma Database
27. Getting Books from Prisma
28. Adding a book into Prisma DB
29. Deleting from Prisma Database
30. Searching from Prisma Database

The goal of this course is to teach you Next.js full stack development in a manageable way without overwhelming you. We focus only on the essentials and cover the material in a hands-on practice manner for you to code along.

Working Through This Course

This course is purposely broken down into short sections where the development process of each section will center on different essential topics. The course a practical hands on approach to learning through practice. You learn best when you code along with the examples.

Who this course is for:

React and web developers in general who want to build fullstack React apps

Next.js 13 and React Crash Course 2023

What you'll learn

Explore related topics

Course content

Introduction14 lectures • 59min

API Route Handlers12 lectures • 1hr 13min

Database5 lectures • 16min

Source Code1 lecture • 1min

Requirements

Description

Who this course is for: