Master Next.js for Beginners with projects

Explore data fetching in Next.js with server and client approaches, loading techniques, error handling, and navigation through the TV Show Central project, using an external API.

Set up a new Next.js project, build a layout with a nav bar using next/link, and wire home and shows routes with data fetching from the TV maze API.

Navigate and build the home, shows, and shows details pages in a Next.js project, configure image domains in next.config.js, and implement dynamic routes like shows/[id] with next/link and next/image.

Master data fetching in Next.js by exploring four methods, then implement server fetch and client route handlers to fetch and display TV shows from an API.

Build a dynamic TV show details page in Next.js by fetching show details from an API using a dynamic id param, and display name, type, and language.

Implement loading UI in a Next.js app by creating loading.js and placing it in the relevant route folders to show during asynchronous data loading, including home, shows, and shows details.

Learn to implement error handling in a Next.js app by creating error.js in the shows folder, marking it as a client with use client, and displaying error.message when fetch fails.

Explore route handlers in Next.js to implement custom back-end logic via API endpoints as Node.js serverless functions, supporting get, post, put, patch, and delete, with get-caching to improve performance.

Learn to build custom API route handlers with next.js using the API folder and route.js, returning JSON via next response. Structure resources like users with login, register, and get operations.

Test route handlers with Tender Client or Postman to cover list users, login, register, update, delete, and user details in a Next.js API routing setup.

Set up a Next.js fullstack blog app, install mongoose, create an API route for posts, define a post model, and connect to MongoDB via a mongo URL in env.

Learn database connection management with pooling to reuse MongoDB connections, using a global cache and a cached promise to avoid reconnection, powered by Mongoose and a URL from env.

Implement the first create, read, update, delete operation by building a create post API in Next.js, including a post schema, route handlers (id routes), and database connection to store posts.

Create a route handler to fetch all posts using the async get function, call post model.find, and return results with a next response as json.

Learn to fetch a single post using a dynamic route in Next.js, extract the post id from params, and retrieve details with find by ID.

Craft update and delete routes with put and delete methods. Use find by id and update or delete, passing the updated payload and verifying with the tinder client.

Create a client-side form on the /post/create page to add a new post, since server components cannot handle the form, and validate title and description with a schema.

Learn to post a new post in a Next.js app using fetch or axios to /api/post/create with JSON payload, awaiting the response, and verifying the new post in MongoDB.

Learn to display all posts in Next.js by building a server-side data fetch, rendering a list of posts with read more links, and routing to post details via API routes.

Master Next.js server component error handling by throwing route errors and displaying them via an error.js in nested routes, logging details and offering a retry.

Learn how to handle errors in client components in Next.js by catching route errors, using the fetch okay property, and displaying a submit error in the UI with internal state.

Implement a loading UI in Next.js with a loading dot js file for server components, triggering during data fetch and showcasing loading, form reset, and custom components.

Implement redirects in a Next.js app by using the use router hook and router.push in client components, or the redirect function in server components after form submission.

Create a dynamic post details page by defining a route with an id, then fetch the single post with an API endpoint and render its details on a server component.

Explore how Next.js uses caching to boost performance with memoization, data cache, and full route and router caches, showing how first and subsequent requests differ, and how to deactivate caching.

Convert a server component to a client component using use client to enable deleting a post, manage internal state with useState and useEffect, and fetch and update data safely.

Learn to delete a post in a Next.js app by calling a delete endpoint with the post ID, checking response.ok, and redirecting to the post page using next/router.

Demonstrate client-side data fetching in Next.js by converting a server component to a client component, using useEffect and useState to fetch posts and handle loading and errors.

Learn to implement updating a post: click edit passes the post id in the url, fetches the post, pre-populates the form, and issues a put request to update.

Explore how to implement authentication and middleware in a Next.js project, differentiate authentication from authorization, and protect resources with json web tokens and server-side middleware.

Implement authentication in a Next.js project with Clerk, install the package, configure keys, wrap the app with the Clerk provider, add middleware, and enable sign-in options.

Access the login user across server and client components using app router helpers, query a dummy API root, and handle unauthorized responses with current user and off.

Access the login user in client components by reusing server and API logic, employ a hook to get user ID, session ID, and token, and set up protected pages.

Implement middleware protection with Clark to secure api and post routes by using a create route matcher, redirecting unauthenticated users to sign in.

Integrate authentication into a Next.js text-to-speech project using click, wrap the app with the provider, and protect the speech page with a protected route.

Develop an image analysis tool using Node.js and Next.js route handlers with GPT-4 to describe images from a URL and answer questions.

Learn to build a full-stack inventory app with Next.js server actions and MongoDB, implementing full CRUD—add, fetch, edit, and delete—along with loading and error handling.

Build a full-stack text-to-speech converter with Next.js and OpenAI, featuring an API endpoint and a frontend form that converts text to speech using the Aloy voice and plays the audio.

Deploy a nestjs text-to-speech project to the internet by preparing the codebase, securing data in the dot env file, pushing to GitHub, linking to Vessel, and deploying with environment variables.