Zero to Hero NextJS 14 course for real project development

Explore how Next.js routes and renders pages through layout.js, using children to compose the UI, with no index.html or index.js, and learn creating new pages and routes.

Explore file-based routing in Next.js with the app folder and page.js files to map URLs to React components. Understand nested routes and how changing the URL renders the corresponding page.

The lecture demonstrates file based routing in Next.js by creating folders and page.js files in the app directory, mapping routes like home, about, blog, and contact.

Learn to use fonts in a Next.js app with variable fonts, imported in the app layout and applied via global CSS, including primary and secondary font weights.

Learn how to build reusable components in Next.js by creating a components folder, wiring header and footer components into the layout, and rendering them in page.js.

Compare server side rendering and client side rendering: SSR serves complete HTML from the server for better SEO, while CSR renders on the client after data fetch. Next.js enables both rendering modes.

Explore client side rendering and server side rendering in Next.js, mastering use client and use server to build interactive client components and server components with data fetching and SEO.

Develop a navigation bar in a NextJS 14 project by integrating components, applying imports, and ensuring client-side rendering with use client for useState-driven interactivity and button-based API calls.

Style the navbar with a dark theme, fix a spelling error, duplicate menu items, and add home, about, services, blog, contact links to enable navigation to home and about pages.

Learn how to implement client-side navigation in Next.js using the Link component, set up routes like /about and /services, style with nav-link, and create a persistent header layout across pages.

Design a bootstrap-based home page hero section with a two-column layout, left side featuring an h1, paragraph, and read more and contact buttons, while the right side awaits next video.

Learn how to apply page-specific CSS in Next.js using CSS modules, importing styles from a page module CSS file, and using className styles to style home and blog pages.

Learn to use images in a Next.js app with the Next.js image component for optimized loading and lazy loading, including width, height, alt, and src from the public folder.

Reuse the existing footer component, copy bootstrap's footer markup, convert HTML to JSX with an extension, and fix SVG icon issues to render a footer in the Next.js project.

Install and import React Icons in a Next.js app, then apply Bootstrap Icons for Twitter, Facebook, and Instagram in the footer with 24 by 24 dimensions.

Master implementing animations in a Next.js app using the React Reveal library, exploring effects like flip, rotate, bounce, and zoom, and installing via npm or yarn with project documentation.

Explore Next.js 14 animations with React Reveal by wrapping elements with fade left or zoom, and enable client side rendering using use client for effects.

Fetch remote API data in a Next.js app from dummy json.com, retrieve all products, and display them as cards using Bootstrap's card component in a grid.

Implement server-side data fetching in next.js by building an async fetch function using fetch or axios to call the products API and render the results on the blog page.

Render API data in the Next.js 14 card component by destructuring product fields like title, price, category, and thumbnail, and map over fetched products to display each item.

Whitelist the remote image domain in next.config.js to allow https image loading from an external server in a Next.js app.

Style and center the card component using Bootstrap flex utilities, adjust margins, and customize color while fetching products from an API with server-side rendering to boost SEO.

Explore data caching in Next.js, including default server caching for fetch calls, time-based and on-demand revalidation, and no-store options to control when data is fetched.

Explore the loading template in Next.js by creating a loading dot.js component with a spinner to display during server data fetch.

Learn to implement page-specific layouts in Next.js 14, customizing header and footer per page with layout templates and passing page components as children.

Learn how to use Next.js error template by creating an error.js file to display an error UI when an API call fails, and customize with the template’s two fields.

Implement dynamic routing with a category and a dynamic id or slug to render pages. Demonstrate nested routes such as route/child/another-child using layout.js and page.js templates.

Apply dynamic routing to a blog detail page by linking cards with the next/link tag, passing the post id to /blog/[id] and troubleshooting undefined id.

Learn how to pass data between pages in Next.js by using link tags and params, retrieving ids from route params, and sharing multiple values across routes.

fetches product detail data from an api by id on the server side, using an async function and await fetch, returning json and enabling implicit caching for faster subsequent requests.

Style and display blog detail data by building a UI card, centering content with CSS, and rendering data.title, data.images[0], and data.description in Next.js, with optional carousal.

Override the Next.js 404 by creating not-found.js and exporting a functional component that imports link from next; test by entering a random page and returning home.

Navigate between home and contact pages in Next.js 14 using next/navigation's useRouter in a client component, calling router.push and passing data via query or route params.

Learn to pass data through query params in Next.js 14 by importing search params, retrieving name and age with get, and forming urls with query strings for navigation.

Mix server and client components in Next.js 14 to balance interactivity and seo, using server components for data fetching and sensitive resources, and client components for browser events.

Explore how to mix client and server components in Next.js 14 with an e-commerce cart and product details, balancing interactivity with SEO scores.

Learn to fetch products from a dummy json product endpoint in a client-side React/Next.js page, create a products route, and center-align the product list for a polished storefront.

Import useEffect and useState, declare the component as a client component, fetch the product list from a get endpoint with an async useEffect, and store data in state for rendering.

Demonstrate rendering a product list in a Next.js 14 client component by using useState and map to display product titles and prices with proper keys.

Explore server component data fetching in Next.js 14 by retrieving quotes from an API, rendering on the server, and understanding the difference between server-side and client-side rendering.

Combine server and client components to add interactivity while preserving Next.js server-side rendering and SEO. Learn patterns for embedding client components inside server components and handling browser events like onClick.

Build rest apis in Next.js by structuring api routes under src/app/api/category and api/product with root.js files, handling get, post, put, and delete via the app router and next response.

Create a Next.js app from scratch with npx create-next for an API-based project, enable TypeScript, ESLint, Tailwind CSS, and a src directory with app router, then run npm run dev.

Explore the Next.js 14 project structure in Visual Studio Code, including public, src/app and api folders, and learn to build rest APIs within a Next.js project with tailwind setup.

Create your first Next.js rest API by defining an /api/greet route and returning JSON with next response. Extend with additional endpoints in upcoming videos.

Build a rest API route in a Next.js app to fetch user data from a remote or dummy source and return JSON for rendering in the user interface.

Learn how to build a full stack Next.js app by consuming a backend REST API, fetching all users, and displaying them with avatars.

Create a post endpoint in a Next.js 14 app using TypeScript by extracting the request body, logging it, and returning a json response via Postman with status 201.

Call a remote microservice from Next.js to create a new user by posting JSON data with fetch. Handle the response by parsing JSON and returning the created user details.

Pass a dynamic user id in a Next.js API put route by creating a [id] folder, reading context.params.id, and sending a request body with data.

Learn to implement request data validation in a backend API by enforcing required fields like name and job and handling 400 bad requests. Explore custom validations such as valid email.

update a user by issuing a put api call to a remote microservice, using an id in the url and a validated body, then return the response.

Learn to implement a delete user API in Next.js by converting the put endpoint, accepting only the user ID, and returning no body with status 204.

Learn to fetch details of a single user with a get endpoint by passing the user id and context, enabling create, get, update, and delete operations in Next.js APIs.

Save data in MongoDB using mongoose and perform CRUD operations on documents within collections, while comparing NoSQL with relational databases like MySQL.

Explore how MongoDB compass connects to a local database, discusses ORM vs ODM, and uses Mongoose as an ODM to query, create, update, and delete data.

Install and import mongoose, create a db connection in src/db/connection.ts, use an env file for MongoDB URI, connect with mongoose, log db connected, handle errors, and export the connection.

Define a Mongoose user schema, register it as a user model, include email, first name, and last name fields, enable automatic timestamps, and export the model for use.

Save a new user to the database by using a Mongoose schema and the user model, via a post API that handles email, first name, last name, and author.