Next.js - Build Full Stack Apps with Next.js & TypeScript

Install essential tools: Visual Studio Code, the latest Node.js runtime, and Git, then set up the terminal. Use Postman for API testing and MongoDB Compass for database management.

Install MongoDB community server on macOS using Homebrew, install the Xcode command line tools, and verify the install with mongo and mongosh to view databases.

Install and configure MongoDB on Windows for building stack apps with Next.js and TypeScript by downloading the community server and shell, installing Compass, updating system path, and connecting with mongod.

Access the official git repo for bookie dash v2, with 20 branches including a deploy-ready version, and learn to fetch section-specific code and configure api keys.

discover what Next.js is and why to use it for full stack web apps with React and Node.js, including server-side rendering and app router in Next.js 13.

Explore file based routing in Next.js by using folders under the app directory with page.tsx for front-end pages and the api directory for back-end endpoints to build full stack apps.

Contrast client side rendering with server side rendering in Next.js, showing how server side rendering pre-renders pages and enhances SEO for more content visible to crawlers.

Install Next.js and review the folder structure, including the app directory, tsconfig, next-env.d.ts, gitignore, and public assets, then explore core files like layout.tsx and page.tsx while starting the dev server.

Learn to build a backend API with Next.js by creating route handlers in the app directory using next request and next response, routing /api/rooms with Next Connect.

Set up Postman and create a bucket v2 environment with a domain variable pointing to localhost:3000, then test the /api/rooms endpoint and save the request in a bucket v2 collection.

Connect a Next.js app to MongoDB using a mongoose db connect function that handles development and production URIs. Configure env vars in next.config.js and validate the connection in API routes.

Create a room model with mongoose by defining a detailed schema. Include fields for name, description, price per night, address, and geospatial location with coordinates and a 2D sphere index.

Create and save a new room through an admin post route, parsing the request body and using the room model to return a success response with the room.

Fetch all rooms from the rooms collection, return a json response with the rooms array and pagination, in a Next.js and TypeScript full-stack app.

Create a data seeder to populate the rooms collection by deleting existing rooms and inserting data from data.ts, using a mongoose connection, TypeScript compilation, and an npm script.

Create a get room details endpoint by id in a backend controller. Retrieve the id from route parameters, return the room data, and issue a 404 if not found.

Update room details via admin routes in a Next.js and TypeScript full-stack app by implementing a put route with id, reading the request body, and returning the updated room.

Implement an admin delete room route at /api/admin/room in Next.js, removing the room from the database with a delete operation, planning image cleanup for future updates.

Explore implementing a custom error handler class extending the default error, enabling status codes, and wrapping controller logic with a global error handler to standardize error responses.

Wrap all controllers with a global catch async error handler middleware. This catches errors, returns error.message and error.statusCode, and defaults to 500 when absent.

Learn to handle cost error and validation error in a Next.js app with Mongoose by delivering user-friendly messages for invalid IDs, logging details, and returning 400 status.

Learn to implement search filters and pagination for room listings in a Next.js and TypeScript backend by building an API filters class, parsing URL search params, and regex-based location matching.

Develop and test API filters for room search in a Next.js TypeScript app, removing location fields, copying queries, and filtering by guest capacity and beds.

Implement pagination in the api filters by reading the current page from the query string and computing skip and limit with mongoose. Return total and filtered room counts.

Access Bootstrap-based front-end templates for BookIT, including html files, css, and images from the git repo. Learn how these ready-made components support focusing on core Next.js development.

Set up a Next.js layout and a global provider, add a head component for metadata, and integrate bootstrap and font awesome scripts.

Create header and footer components in a Next.js layout and apply bootstrap styling. Replace class with className and wire CSS to render the header with logo, avatar, and a dropdown.

Build a Next.js home page by creating a reusable room item component, integrate React star ratings, and render room cards with name, price, reviews, and details on the app page.

Install and integrate React hot toast, add a top-level toaster in the global provider, and display both success and error messages in your Next.js and TypeScript full-stack app.

Explore server components and client components in Next.js, learn how server-side data fetching and optional caching improve security, performance, and SEO, and compare static versus dynamic rendering.

Explore data fetching in Next.js, comparing server components and client components, and see how the native fetch API is extended to cache data by default with static rendering.

Explore data caching in Next.js, learning how server components cache data by default, override with no cache or no store, and revalidate data that doesn't change often.

Explore data revalidation in Next.js, clearing the cache and fetching fresh data for server and client components using time-based and on-demand strategies like revalidate times, zero caching, and dynamic behavior.