The NEXT.JS & REACT 19 course, welcome to the Server Side.

Learn to create a Next.js app by running npx create next app, selecting app router, and launching npm run dev to view at localhost:3000, while reviewing package.json and project structure.

Explore routing in Next.js by comparing the app router and pages router, learn how the file system determines routes, and adopt the app router for modern route design.

Learn how to set up static routes in Next.js by creating pages like home and contact, organizing the pages directory, and exporting default components to render routes.

Explore building nested routes in Next.js by creating static routes like /users and deeper routes such as /users/profile and /users/profile/name, using a pages directory structure and dynamic routing concepts.

Create dynamic routes in next.js by using square-bracket directories to capture the user id and name from the url, then load the profile via dynamic params.

Learn to access user id and name through page route params and retrieve query strings with search params in Next.js server routes, resolving promises with async/await and understanding server components.

Learn how catch-all segments in the next.js app directory simplify routing by using a single [..slug] component to handle multiple routes and access params.

Explore the root layout at app/root/layout.js as the main wrapper that imports fonts and global CSS and renders children. Create route-specific and nested layouts that wrap content.

Explore linking and navigation in Next.js using the Link component for client-side routing and programmatic navigation with router.push and redirects, plus server vs client components.

Organize reusable components in Next.js by creating a source components folder, building a nav component, importing next/link, and distinguishing server components from client components.

Explore how to use global CSS and CSS modules in Next.js, import styles into layouts or components, and apply page-specific styling with modular, uniquely scoped classes.

Explains parallel routes in the Next.js app directory by building a dashboard with analytics and posts as parallel routes. Uses a layout to render the children.

Use route groups to structure nested routes in Next.js, showing guitars as a container with brands and models, enabling direct routes and shared layouts.

Create a Next.js app with React 19, build routes and pages for employees (including by id, add, and edit), and integrate bootstrap for a header and layout.

Explore how server-side rendering with Next.js differs from plain React, including static generation, hydration, and streaming, to deliver pre-built HTML and dynamic interactivity for SEO.

Learn to set up a JSON server as a fake database for development, install and start the server with db.json on a port, and fetch employees from a local API.

Fetch employees on the server in Next.js and React 19 course, using axios and fetch, then display them as bootstrap cards with links to each employee’s detail page by id.

Explore Next.js server and client components, and learn why hooks like use state, use dispatch, and use effect run only in client components, with server pre renders and hydration.

Compare client and server components in Next.js, learn when to use server actions, understand hooks and event handler limitations, and explore server-side forms and their state challenges.

Learn to build a Next.js server form that submits employee data to a json server via an onsubmit action and axios post, using server components for server-side handling.

Discover server forms in next.js and react 19 by implementing a server action with an async function and optional axios usage; learn form handling without javascript and server-side validation.

Explore how the use action state hook in React 19 and Next 15 simplifies server actions, enabling real-time form validation, error handling, and user feedback in a client-server form workflow.

Discover how to implement a loading UI in Next.js by wrapping routes with a loading component, using suspense, and customizing per-route loaders for data fetching and error handling.

Fetch an employee by ID from params using axios, then display the employee’s full name, position, and age. Handle 404-like errors with a graceful UI.

Explore building a user-friendly error UI in Next.js by switching from Axios to fetch, handling bad requests and not found errors, and implementing a route-specific error UI with retry capabilities.

Create a custom not-found UI in app/not-found.js, importing next/link to offer a home link, and apply it to internal routes to replace the default Next.js not found UI.

Navigate to the edit employee page, fetch the employee by ID, and render a form prefilled with data to update it via a server action.

Create and validate an employee form in a Next.js and React 19 app using Formik and Yup, configuring initial values, onSubmit, and a client-side validation schema.

Create a server action to edit an employee with a patch request and form data, perform server-side validation (age at least 18), handle errors, and redirect after success.

Learn to update employee data with Next.js and React by submitting form values through an edit employee action, handling server responses, and redirecting back home.

Delete an employee using a form and a server action in Next.js, showing how to implement a delete request with fetch, redirect after deletion, and handle promises with bind.

Explore streaming with Next.js and React Suspense to load components in parallel without blocking the page, using a fallback loader while each component finishes loading.

Learn to build and start a Next.js app for production with npm run build and npm run start, test caching, and diagnose static versus dynamic routes and server data.

Learn how next.js uses root cache, router cache, and data caches with memoized requests, and declare pages dynamic or static via dynamic functions, segment config, fetch API, and dynamic routes.

learn how to configure Next.js pages as dynamic or static, use revalidate for on-demand updates, and apply segment config options to control data freshness on routes.

Learn to revalidate paths on demand in Next.js after add, delete, or edit actions. Revalidate home, layout, and specific employee pages to ensure fresh data.

Learn how to use fetch options in a Next.js and React 19 app to control caching and revalidation, turning routes from static to dynamic with strategies like no-store and revalidate.

Explore how to work with headers and cookies in Next.js, showing how headers influence dynamic vs static pages, and how to access, iterate, and manage header values and cookies.

Generate static params to pre-render employee pages at build time, creating static html for each employee and showcasing caching and fast delivery with Next.js.

Explore how next API routes enable server side tasks by handling requests to fetch data or validate inputs, returning JSON via post, get, put, patch, and delete.

Create api routes using the Next.js app router by adding a route.js in app/api/data to handle get, post, put, patch, and delete, and test with Postman.

Test Next.js API routes with Postman by exporting an async get handler and returning a JSON response. Explore accessing request data and query params like x and y on /api/data.

Fetch the employees via a get request from a local server, return a JSON list with the employees and status, and demonstrate setting a token cookie.

Learn to post a new employee by parsing a json body with full name, position, and age to the api/data endpoint, and return success or error response, tested with postman.

Learn to build a Next.js api route with a dynamic id to patch and update an employee. Handle params and request bodies, and return json responses for a targeted update.

Implement delete employee functionality in a Next.js React 19 app by reusing the update-by-id pattern, using fetch with delete and params for the employee id.

Set up a new Next.js project named extras, enable tailwind CSS, configure the app router, skip TypeScript and eslint, and install tailwind CSS IntelliSense.

Explore Tailwind, a utility-first CSS framework integrated with Next.js, learn how to install, use utility classes for fast styling, and customize colors and fonts via Tailwind config.

Install sass with npm, create a global scss file with variables, import it from the project root, and verify font and color styling render in Next.js.

Install and integrate Next UI with a Next.js project, configure Tailwind and Framer Motion, and wrap the app with the Next UI provider to use components like buttons and carts.

Practice video builds a Next UI nav bar in a Next.js app, showing brand, content, and menu items with tailwind, and demonstrates useState driven menu toggle for desktop and mobile.

Configure import aliases in a Next.js project to simplify module imports, using baseUrl and path aliases like @ and components to streamline code and save time.

Explore the next image component for static public assets, optimizing with width, height, fill, lazy loading, and styling, then begin authentication setup using Next.js, MongoDB, and Mongoose with guarded routes.

Build an authentication system in Next.js from scratch, install Next UI and tailwind, set up the app router and provider, and prepare a foundation for the final practice app.

Create a Next.js navigation bar using Next UI components with a brand, right-aligned content, and dropdown including register and logout. Emphasize authentication setup and fonts for layout.

Implement custom fonts in a Next.js and React 19 course project using Google fonts or local fonts. Configure font weights, styles, subsets, displays, and CSS variables, then integrate NextAuth.

Learn how to configure next-auth in a Next.js app by setting up an API route, choosing providers (credentials and GitHub), and wiring an authorize function to validate a fake user.

Create a .env file to configure next auth secrets, including next auth secret, github secret and url, then validate user authentication with credentials, tokens, and cookies for a protected route.

Guard routes in Next.js with middleware or NextAuth, using session checks to protect dashboards and private pages, while exposing public posts and login flows.

Learn how to retrieve a session on server components with get server session in Next.js, contrast with client components, using a dashboard example and a modular next-auth options file.

Build a client session system in Next.js by creating an auth provider, wrapping the app, and using useSession to guard routes like the dashboard.

Learn to implement sign in with GitHub by configuring a GitHub OAuth app, obtaining the client ID and secret, wiring them via environment variables, and authenticating users to the dashboard.

Design a custom register form in a Next.js and React 19 app, including routing, layout, and server session checks.

Build a toggleable sign-in and register form in the Next.js and React 19 course, using Tailwind styling, Next UI inputs, and validation.

Create and configure a MongoDB cluster for a project, set up an admin user, enable network access, and generate the connection string for a Node.js app using mongoose.

Implement a robust MongoDB connection with mongoose in a Next.js app, including a lib/db.js, a user model, connection caching, and environment variable validation.

Create an api/register route to register users by posting email and password, check for existing users, hash passwords with bcrypt, save to MongoDB via Mongoose, and return a json response.

Register users by posting email and password to /api/register, handle responses and errors, and observe password hashing; note that sign-in and session creation are not yet implemented.

Implement sign in with bcrypt password validation against hashed passwords in the database, using next-auth credentials flow to securely authenticate users, guard dashboards, and handle redirects.

Build a client-side sign-out in the navigation by checking the session with next-auth, conditionally showing logout or register, and triggering signOut with a callback URL.

Create and manage venues and events in the Evento project within a Next.js and React 19 course, adding navigation links and admin sections with authentication checks and page scaffolding.

Create a venue model with mongoose for Mongo and implement a venue form in the components folder to capture name, address, and state, wiring it into the dashboard.

Create a server form using tailwind and next ui inputs for name, address, and state, wiring a submit action to add the venue.

Post new venues by connecting to the database, importing the venue model, and saving form data to MongoDB with mongoose, while validating with yup and handling success or errors.

Learn to validate venue data with Yup in a Next.js and React 19 project, build a venue schema, validate form data, and return a structured errors array.

Handle venue form submission by catching pending states, showing a loading indicator, and displaying success or error messages via server actions.

Create a Mongoose event model with artist, venue reference, description, date, and slug; build an add event page as a server component that fetches venues and renders the form.

Build an add event form using React hooks, Formik, and Next UI components. Validate inputs with Yup, select venues from a list, and prepare a date picker integration.

Install and integrate a React date picker in a Next.js and React 19 project, wire it to Formik, enable date and time selection, and implement a custom input.

Learn to post new events by collecting form data, handling errors with try/catch, and posting via a server action, then revalidating dashboard and home to refresh the event list.

Learn to display toasts after adding an event in a Next.js and React 19 app by installing a toast library, configuring a global container, and showing bottom-right success messages.

Learn to fetch and display home events in a Next.js and React app using skip and limit, populate venues, and implement load more with a masonry layout.

Build a home events grid with a masonry layout using React Masonry CSS and Next UI cards in Next.js. Pass events as props and render responsive cards with breakpoints.

Build dynamic home event cards using Next.js and React, implementing absolute headers and footers, a masonry layout with even and odd heights, image sourcing, and a load more events flow.

Implement a load more button to paginate posts in the Next.js and React 19 course. Manage loading state and fetch next events via a server action using skip and limit.

Build an event page by slug in a Next.js app, fetching the event by slug and populating venue data. Configure next image for external sources and handle not found cases.

Create a reusable venue card component in a Next.js React app, pass event and venue data via props, format the date, and render with Next UI.

deploy your next.js and react 19 app to production with vercel, linking your repo and configuring environment variables for next auth and mongodb.

Next.js unifies React and JavaScript libraries to build fast, full stack apps, offering file-based routing, pre rendering, caching, and API routes for SEO friendly client and server apps.

Install a Next.js app using npx create-next-app with latest version, enable ESLint, use the source directory and app router, then run npm run dev to view the app at localhost:3000.

Explore Next.js routing with the app router, using file-system based routes and nested directories to render pages, while comparing the app router with the older pages router.

Create a simple route in Next.js by organizing the app, defining a home page, and understanding 404s and nested routes like contact.

Master nested routes in Next.js by building pages inside directories like users and profile, and implement dynamic routes that handle IDs and roles such as admin or guest.

Create dynamic routes in Next.js with a single file using square bracket parameters to match multiple paths, such as user id and user name, and access params and search params.

Access dynamic route values with params and search params in Next.js server routes, log the id and name, and learn catch-all routes for long URLs and server components.

Explore catch all routes and segments in Next.js, implement a dot dot dot slug, and render a single component for multiple paths while accessing route params.

Explore how Next.js root layout wraps the entire app, renders props.children, and enables per-route and nested layouts using server components for global styling, fonts, and metadata.

Learn to build navigation in next.js using the Link component to avoid page reloads and enable client components with the use client directive for programmatic redirects via router.push.

Create standard React components and vanilla JavaScript modules in a Next.js app, export and import them into pages, and organize them outside the app in a components folder.

Import and apply global css across the app, then create route-specific css modules for pages like contact to keep styles scoped. Explore tailwind integration and next ui within next.js styling.

Implement parallel routes in a Next.js app to render analytics and posts inside a shared dashboard layout. Configure layout.js and page.js, pass props, and use conditional rendering to control content.

Discover route groups in Next.js by building admins and users with separate layout.js and page.js files, routing guitars, brands, and models, and understanding independent full reloads and nested layouts.

Create a tiny next.js template by setting up the environment, installing dependencies, configuring the app router, and building dynamic employee routes with add, edit, and by id pages.

Build a header component in a Next.js React project, using Bootstrap classes and Next/link for navigation between home and add employee routes, and explore server components and static routes.

Explore how Next.js uses routing, pre-renders pages with static generation, dynamic rendering, and streaming, and master hydration to connect HTML with React interactions, using Json server for practice.

Learn to simulate a real API using json-server, create a local db.json, perform create, read, update, and delete on employees, and query endpoints with axios or fetch in development.

Fetch and display employees from the database using Next.js server components and Axios, rendering Bootstrap cards on the server. Learn about pre-rendered HTML delivery and why hooks aren’t used.

Discover how React hooks behave in client components versus server components. Use use client to enable hooks, and use server to pass functions as server actions via props.

Explore Next.js client and server components, their hooks limits, benefits like caching and authentication, when to use server components, and how to pass server actions via props or separate files.

Create a server action file with use server, export an async function, and import it in a client component to trigger a server-side log; this enables reusable actions.

Learn to build an add employee form powered by server components and server actions with Next.js 14, handle form data, post to an API, and redirect after creation.

Learn to refactor form submission to server actions by moving logic into a reusable actions file, posting data, and redirecting, enabling a server-side form flow that works without JavaScript.

Learn to use the use form state hook to handle form submissions in a client component, pass form data and state to the ad employee server action, and display messages.

Master server-side form handling in Next.js by validating full name, position, and age, posting data with axios, and returning errors or success outside try-catch for non-js submissions.

Fetches an employee by id using axios in a Next.js React 19 course, extracting id from props.params to display full name, age, and position, with error UI for not found.

Learn to implement a loading UI with root and route-specific loaders in Next.js and React, using suspense and a loading component to wait for promises.

Learn to implement a fetch-based error UI in a Next.js app, throwing errors for failed requests and rendering a client-side error component with a retry option.

Create a not-found UI in Next.js by building a custom not-found page triggered on demand, and explore integrating server actions with client validation for employee add and edit.

Create a dynamic edit employee page in Next.js by routing with an id, fetch the employee data on the server, and wire a client-side validated form using Formik.

Implement client side validation in a Next.js and React setup by building an edit form with Formik, configuring initial values and a validation schema, and handling submit with error feedback.

Learn how to implement a server action in Next.js to edit an employee, perform server-side validation, and patch updates via fetch with form state integration.

Learn to wire an edit server action in a Next.js and React 19 app, using form state, dispatching a patch, handling server errors, and noting caching implications.

Delete employees using a server action in Next.js, via a form submission in a server component, with redirects and cache-aware behavior to avoid stale data.