Next.js 13 Bootcamp - From Scratch to Full-stack App 2023

Learn to create and run a new Next.js app using official docs, configure TypeScript and Tailwind, and explore the folder structure including the dot next folder.

Explore the Next.js 13 folder structure from node_modules to the app directory, including the public assets, src root, layout.tsx, global.css, and page.tsx, and how frontend pages map to backend APIs.

Learn the do's and don'ts of the default Next.js 13 project structure, including which root and app files to keep and how to handle gitignore and config files.

Create static pages and master Next.js routing using the app directory and page.tsx. Explore home, projects, and contact us routes, dynamic pages, and basic query handling with Next.js link components.

Build a navbar to navigate between pages using next/link, define routes for projects, resume, and contact us, and apply a consistent header across all pages.

Create dynamic routes in Next.js by building a projects gallery that navigates to each project using a dynamic id, reads route params, and supports nested dynamic routing.

Create nested dynamic routes in Next.js 13 by building a project detail page with a dynamic id and a nested reviews page linked from project lists.

Learn to read query strings from the root route using search params in Next.js, display applied filters such as tech and sort by on the projects page.

Explore the app directory's advanced features in Next.js 13, including layouts, header reuse, and routing with the app router, and learn to implement a shared layout across multiple pages.

Learn to split an e-commerce app into public and private pages using routing groups in Next.js 13, and apply separate layouts with headers for login, register, home, and profile.

Customize not-found error pages in a Next.js 13 app by creating a dedicated not-found.tsx in the app directory and designing a bespoke page for when a route is missing.

Learn how Next.js middleware runs code before every request to enable rewrites, redirects, and header changes, and how to configure it with a middleware.ts file.

Explore the differences between server components and client components in Next.js 13, including rendering, interactions, and browser resources, and learn why both types matter for server data and API calls.

This lecture explains rendering in Next.js 13 client versus server components, including use client and fetch, and notes that dynamic data in client rendering isn't available to SEO.

Render data in server components by exporting an async get data function outside the component and calling it within the server page to pre-render dynamic content for SEO.

Explore how Next.js 13 client components support interactions such as button clicks and alerts, while server components do not support hooks like use state and use effect.

Learn how client components access browser resources like local storage and cookies, while server components run on the server and cannot access the browser due to prerendering.

Learn to navigate between server and client components in Next.js using the next/navigation router, and implement a nested client component to enable onClick interactions in server components.

Discover when to use server components versus client components in Next.js 13, including data fetching, backend access, and securing sensitive keys by keeping heavy logic on the server.

Learn to build full-stack apps with Next.js built-in API by creating route handlers under app/api/users, implementing get and post methods with Next.js response json.

Learn to access query strings in Next.js 13 API routes by using URL search params and get to retrieve individual values such as name and age.

Learn to access the request body in Next.js API routes using the post method, by parsing with await request.json and reading query strings via nextUrl.searchParams.get, for creating a user.

Learn to implement the put method and delete method in Next.js 13 API routes to update a user by id, using router parameters, query strings, or request body.

Learn how to connect Next.js API routes to MongoDB using mongoose and dotenv, including setting up MongoDB Atlas, environment variables, and a reusable db connection function.

Create a user model in a Next.js 13 project using mongoose, defining name and age fields and enabling CRUD operations with a users collection.

Post a new user in a Next.js API route by saving the payload to MongoDB with the user model, and discuss timestamps setup.

Demonstrate the get operation in a Next.js 13 app by querying users with dynamic URL filters (name, age) via the database and returning filtered results.

Explore building a get user by id API using router params and the user model's findById, handle 'user not found' errors, and test with valid and invalid ids.

Demonstrates put and delete operations in a Next.js app with MongoDB, using router params and find by id to update or delete user data.

Learn to fetch data from your own Next.js API routes using server side rendering, fetch /api/users, wrap data in an object, and understand full domain requirements and caching.

Explore how Next.js handles server-side data fetching with fetch, including caching and revalidation options like no cache, force cache, no store, and a programmable revalidate duration.

Learn to manage state in Next.js 13 by creating a Redux store, slice, and reducers with Redux Toolkit, and dispatch actions in a counter app.

Learn to access redux data in a Next.js 13 app by wiring a React-Redux provider, using useSelector and dispatch, and managing a counter slice.

Build a feature-rich task manager project in Next.js 13 bootcamp, implementing authentication with JWT, middlewares, and MongoDB-backed CRUD across registration, login, home, and task form pages.

Design and implement a centered registration form in a Next.js 13 bootcamp app, then mirror the styling for a login form, using a primary theme color and global input styles.

Implement real-time validation on the register page to disable the submit button when username, email, or password are missing, and replicate this for the login page with a register/login link.