Next.js & Laravel 11 Build a Modern Full-Stack Application

Explore React.js fundamentals and a component-based architecture that enables reusable UI components, interactive pages, and API data loading, using Node.js and Visual Studio Code.

Learn to create a React app with Vite by running npm create vite, selecting React and JavaScript, then install dependencies and open the project in Visual Studio Code for development.

Learn to run and build a react project using npm run dev and npm run build, then locate the production distribution folder ready for deployment.

Dive into the basic React project structure, from index.html and root div to App.jsx and main.jsx, with package.json scripts, CSS, assets, and the public folder.

Organize the React project by creating assets with images and CSS, and source folders for pages and components, remove unused CSS, and update the title to learn React.

Install essential VS Code extensions for React development: auto close tag, auto import, auto rename tag, ESLint, React.js code snippets, Tailwind CSS, Thunder Client, Postman, and icon themes.

Learn to build and render functional React components in a Next.js and Laravel 11 full-stack setup, replacing class components and organizing app.js and demo components.

Create and organize header, hero, contact, and footer components in the component folder, then render them on the home page via the app component to form the layout.

Explore how JSX enables html-like syntax in JavaScript, illustrating conventions such as a single parent element, fragments, className, camelCase attributes, self-closing tags, and inline styles as objects.

Explore conditional rendering in React with JSX shorthand and the ternary operator, using a marks variable and an 80 threshold to display boolean or average results.

Explore how to implement a jsx immediately invoked function in React, using anonymous functions, expressions, and if-else logic to render dynamic grades and outcomes.

Learn how to implement a JSX loop with the map function to render array data in a Next.js context, including keys, iteration indices, and dynamic city lists.

Explore JSX conditional rendering using if-else, switch, ternary, logical and, and an immediately invoked function to display login or logout buttons based on status.

Explore JSX conditional rendering with a switch statement by defining a status constant and returning logout or login buttons for true or false cases, with a default that returns null.

Learn how to implement conditional rendering in JSX with the ternary operator, using a status flag to toggle between logout and logging buttons, expanding on switch statement ideas.

Learn how to render in JSX with the logical and operator to show content conditionally, using a status variable to display a log out button only when true.

Explore jsx conditional rendering using an immediately invoked function to toggle between a log out button and a logging button based on status.

Explore how props pass data from a parent to a child component in an unidirectional, read-only flow, with a hero component and hero image as examples.

Demonstrate passing simple strings from a parent to a child component via props, using a title and description, then render them in the child.

Learn how to pass an object from a parent to a child component using props, and render dynamic data such as name and city in the child.

Pass a function prop from a parent to a child component and trigger it with a button click to display an alert.

Master click event handling in a modern full-stack app by wiring onClick in JSX, showing alerts, and choosing between arrow and regular functions.

Learn how to handle form submission in React using onSubmit, prevent default, and a submit button to prevent page reload and show an alert.

Learn to install and configure react router dom, build home, about, and contact pages, and implement browser router, routes, and 404 not found handling.

Create a React Router DOM menu with Link and NavLink from React Router DOM, route home, about, and contact, and style active links using isActive and isPending.

Compare browser router and hash router in react router dom, explain how urls appear with or without hash, and how history API and server configuration affect deployment.

Pass multiple parameters through navigation using React Router DOM. Use a dynamic route and useParams to receive id and name on the about page and display them.

Learn about React hooks for state management and side effects in functional components. Explore useState, useEffect, useContext, and useRef with live examples, and preview useRef in the next video.

Learn to manipulate the DOM in React using useRef to access an element, read and set innerText and innerHTML, and update content with a click event while avoiding re-renders.

Use the useRef hook to access and update DOM attributes, such as image src, by clicking to replace the image and dynamically set height and width with setAttribute.

Master useRef to manage multiple input elements in a Next.js and Laravel 11 full-stack app, capturing first and last name values on click and displaying them.

Learn how to use the useRef hook to toggle bootstrap CSS classes on click, switching from text success to text danger.

Cache API results with useRef to avoid refetching on re-renders, demonstrating fetch data and show data buttons that store JSON in a ref and render it as a string.

Explore how useState stores component data in React, triggers automatic re-renders on changes, and enables interactive controls like incrementing or decrementing a number via onClick.

Learn to manage a JavaScript object with useState in React by updating specific keys immutably, using the spread operator and previous state in a click-driven interface.

Learn how to build a simple to-do app using useState with immutable arrays, capturing input, updating the list with a spread operator, and rendering items with map and remove functionality.

Demonstrate using useState to manage an immutable array of items, adding elements with push and removing by index using splice, and updating the list via setList with element data.

learn to manage form data with useState in React, building a clean form with inputs, selects, and radio buttons, and update state for submission.

Learn to manage a multi-field form with useState and onChange, updating a form object for first name, last name, city, and gender, and submit with preventDefault and console logging.

Explore how the useEffect hook runs after component mount and on dependency changes, by passing a callback and an optional dependency array, with live examples of reloading behavior.

Learn how to fetch API data inside useEffect using promises, handle JSON conversion with fetch, then, and set data to display results in a React component.

Learn to call an API with async/await in a useEffect hook, using an immediate invoked function, fetch data, convert to JSON, and store it with useState.

Install node.js from nodejs.org, preferably the 20.x LTS, and verify with node -v; set up Visual Studio Code and enable extensions like auto close tag and rename tag.

Explore how Next.js, a React-based framework by Vercel, enables production-ready web apps with server side rendering, static site generation, and out-of-the-box optimizations.

Explain the key differences between React.js and Next.js, including library versus framework, server side rendering and static site generation, built-in routing, and data fetching approaches for full-stack apps.

Create a fresh Next.js project, configure options like TypeScript, CSS, Tailwind, and a src/app structure, then run npm run dev and npm run build to develop and serve locally.

Explore the Next.js project structure, including next, public, and src folders, and how layout, pages, and global CSS organize a deployable full-stack app.

Create Next.js pages with the app directory by defining functional components in page.jsx; this auto-generates routes such as /about and /profile, using a root layout and optional tailwind styling.

Place static assets in the public/images folder and reference them from a Next.js component to load demo.png. Import images, use next/image, and set alt text with optional width and height.

Learn to use global CSS for project-wide styles and module CSS for component-scoped styling in Next.js, including import patterns in layout.js and per-component class naming.

Explore how Next.js handles client side rendering with useEffect and useState to fetch API data, and contrast it with server side rendering delivering pre-rendered HTML.

Learn how to implement server side rendering in Next.js by converting a client fetch to a server data fetch with an async get data function and rendering the API data.

Determine when to use server side rendering or client side rendering by following Next.js guidance on server components, client components, data fetching, and browser APIs.

Learn when to use server side rendering versus client side rendering, how to mix them in one page, and enable client side behavior with use client and on click listeners.

Explore how Next.js routing maps folders to routes, using app/page.js to create home, about, contact, and admin pages, handle 404s, and support nested routes.

Explore nested routing in Next.js by creating folder structures such as brand, apple, and iPhone with page.jsx files, showing how routes load automatically for each nested path.

Create a reusable menu component in Next.js, import the Link from next/link, and load it on the home, about, admin, and contact pages. Navigate nested routes such as brand/apple and brand/apple/iphone, and plan future enhancements like a progress bar with third party packages.

Learn to install and integrate the next in progress bar package in a Next.js app, configure globally in layout, and customize color and options to show a routing loading bar.

Implement an active link system in a Next.js app by applying active and pending css classes based on the current path with usePathName in a client component.

Pass and read query parameters with the link component in a Next.js and Laravel 11 app, including path name and search param values on the about and home pages.

Learn to retrieve link query data with useSearchParams in Next.js navigation, extract name and price from params, and handle client side rendering with use client.

Explore how the Next.js link component's replace and prefetch properties control navigation history and data loading to optimize performance.

Learn programmatic routing details in a Next.js and Laravel 11 full-stack app using the use router hook to push, replace, refresh, back, and forward routes, and pass parameters between pages.

Explore how to think in Next.js by combining server components and client components for secure data fetching, database operations, and improved performance and SEO.

Explore why client components enable interactivity in Next.js, using onClick and onChange with useState and hooks, and how server pre-rendering and client hydration make pages responsive.

Explore setting a base path in Next.js via next.config.js and managing environment variables with .env files, including API keys, and understand client versus server component visibility for secure use.

Discover how to pass headers in a Next.js and Laravel 11 full-stack app, using next.config to set async headers and view them on the home and about pages.

Explore header security configurations, including x-frame-options to prevent clickjacking and a content security policy with default-src 'self' and script-src and style-src rules that allow trusted CDNs.

Learn header security in Next.js and Laravel 11, using content security policy and permission policy to restrict camera, microphone, geolocation, battery, and more, plus strict transport security settings.

Master header security in Next.js by configuring the X content type option to manage file handling. Hide the powered by header and customize base extensions and production build directory.

Explore how next.js configures keep-alive connections and http agent for efficient backend requests, with optional compression via gzip to optimize rendered content and static files.

Explore how Next.js image optimization handles local and third-party images. Configure domains in next.config and use responsive, fixed, and priority image properties for faster loading.

Learn how to optimize fonts in a Next.js project by loading a Google font (Roboto), configuring weights and Latin subset, and applying the font globally via CSS variables.

Load a local font in a Next.js project by creating a fonts folder using a sunshine tropical font variable. Compare Google fonts and local fonts for typography consistency.

Learn how to load CDN links in Next.js by injecting a script element in the main layout, using Next/script, and loading axios or bootstrap via CDN.

learn how next.js middleware works, using server-side request interception to enforce authentication and authorization, perform redirects, path rewriting, and access control for admin routes, with examples and best practices.

Build modular middleware that logs requests, inspects the requested url, and uses next to redirect routes such as about to home with includes and matcher logic.

Explore how to customize Next.js's default 404 not found page by creating a notfound.js, rendering a server or client component, and fetching data with use client for dynamic paths.

Welcome to the course and begin your journey to becoming a professional developer by following step-by-step materials. Build this application alongside the instructor and stay motivated toward success.

Design a full-stack workflow with Next.js on the front end, Laravel on the back end, and MySQL, using Tailwind and Bootstrap to build and fetch dynamic data via rest APIs.

Set up the full-stack environment for a Next.js frontend and Laravel backend, installing Node.js, VS Code with extensions, XAMPP, phpMyAdmin, Composer, and Postman to develop and test APIs.

Bootstrap a Next.js project from scratch by installing Node.js, using npx create next app, enabling Tailwind CSS with an src directory and app router, then run npm run dev.

Set up a Next.js and Laravel 11 modern full-stack app, install dependencies like axios, and prepare public assets and data for dynamic pages.