Next.js & Supabase Mastery: Build 2 Full-Stack Apps

Create a brand new Next.js project with the create next app CLI, verify Node.js and npm/npx setup, and run the development server to view the app locally.

Explore the Next.js project structure, including the app and public folders, key config files, postcss and Tailwind CSS integration, and dependencies for building scalable apps.

Learn the essentials of react to build with next.js, since next.js relies on react; skip if you’re fluent, otherwise gain enough react to proceed with the course.

Explore how JSX blends JavaScript and HTML to render React components, using a single root element or fragments, with dynamic content via curly braces and className.

Learn how React components use JSX and JavaScript functions to create reusable UI elements, and export default a component per file. Pass data with props to customize cards.

Explore passing data from a parent to a child with props, using destructuring, default values, and JSX children; learn component composition and maintain read-only data flow from parent to child.

Master React event handling in Next.js by adding a clickable button, defining a handleClick function, and passing it as an onClick handler; use the event object and preventDefault for forms.

Explain how to manage component state with the useState hook in React, demonstrating toggling a button label from show to hide and ensuring UI rerenders on state changes.

Learn conditional rendering in React by toggling visibility with a boolean state, using the ternary operator and logical and to show or hide user interface elements and card lists.

Render a list by mapping names to cards, manage the data with use state, and assign a unique key; update the array with set names and the spread operator.

Export and import a card component in a Next.js project by moving it to a components folder, using a default export, and applying a root path alias to simplify imports.

Explore how to define routes, create pages and layouts, and navigate with links in Next.js, then learn about prefetching, caching, and dynamic routes with parameters.

Learn routing in Next.js using a file system based router and the app router to create pages and nested routes like dashboard/settings and about/projects.

Explore how next.js layouts share ui across pages by implementing a root layout in layout.js that renders children and a common header, enabling consistent navigation and footers with tailwind styles.

Learn to implement client-side navigation in Next.js with the link component, replacing anchor tags, speeding transitions, and preserving header state with reusable components.

Understand how Next.js prefetching and caching optimize navigation by preloading route segments and storing prefetched pages in a router cache, enabling instant, snappy user experiences in production.

Create dynamic routes by placing a [slug] parameter in app/blog, read params.slug in the page, and load blog posts from external storage using that slug, with prefetch guidance.

Learn how data fetching and caching work in Next.js through practical examples using the JSON server to simulate GitHub API responses for a developer portfolio.

Explore how data fetching in Next.js works, with recommendations for server-side data access, caching and revalidation, per-needed fetching, and streaming to improve performance and security.

Use json server to mock a rest API with a json db to practice data fetching in Next.js, including setup, custom npm script, and port 3001 for local development.

Fetch data on the server in Next.js with the fetch function, leveraging caching, to retrieve mock repos from localhost:3001/repos for the projects page and render title, description, and stargazers count.

Discover how Next.js fetch enables automatic data caching: request memoization for the current component render and a persistent data cache for subsequent requests, plus revalidation options and opt-outs.

Explore how Next.js fetch requests are cached in the data cache, how to perform a development hard refresh with cache-control headers, and how to disable caching or apply time-based revalidation.

Explore Next.js loading UI and React Suspense to stream data while the page remains interactive, showing temporary loading content as slower data loads in the background.

Slow data fetching from external APIs can block the whole page; simulate delays, disable cache, and observe a five-second spinner before rendering, highlighting the need for robust data-fetch strategies.

Discover how to use a loading UI in Next.js and React to render pages while slow data loads, with suspense and streaming replacing fallbacks as content finishes.

Learn to use Next.js loading UI and suspense to show a temporary UI during slow data fetches, enable server-side streaming to stream data in the background, and orchestrate suspense boundaries.

Use React Suspense to load the project list asynchronously and replace the page-wide loading UI with a dedicated Suspense fallback, enabling partial, faster data rendering.

Explore streaming versus traditional server-side rendering (SSR): streaming delivers content bit by bit for faster, more interactive pages with SEO benefits and reduced data usage, while Next.js handles added complexity.

Explore styling modern apps using Tailwind CSS, a utility-first framework, and CSS modules to automatically scope styles. Get a quick start with Tailwind CSS's popular flexbox and grid classes.

Explore styling options in Next.js using CSS modules and Tailwind CSS, including local-scope CSS modules and utility-first Tailwind for responsive and state-based design.

Learn to set up tailwind css with Next.js, use Visual Studio Code extensions like tailwind css intellisense and tailwind fold, and apply tailwind directives for dark mode and responsive layouts.

Extract the navigation into a dedicated component, wrap it in a nav element, and implement responsive flex design with Tailwind breakpoints to switch from vertical to horizontal layouts.

Style navigation links consistently by extracting a CSS module and using Tailwind's apply directive; import styles and apply hover, padding, and responsive text sizing with md breakpoints.

Position the header elements with a flex container, add a logo and a dark mode switcher, center items, and apply responsive spacing and visibility rules for small and medium screens.

Create reusable, customizable card components with a class name prop, implement a responsive two-column grid, and refine layout and typography using tailwind utilities.

Master error management in Next.js by using error boundaries to contain component failures and create custom error pages, including not found (404) pages.

Learn to handle errors on Next.js pages using page-specific error.js files and React error boundaries to keep the UI functional and prevent whole-page crashes.

Learn how React error boundaries prevent blank screens by wrapping risky UI in a fallback component, install a ready-made boundary, and apply it to Next.js pages.

Learn how Next.js error boundaries work as errors bubble up to the nearest parent boundary, with error.js placement in about pages, layouts, and route layouts explained through hands-on examples.

Master nested layouts in Next.js to render shared content for the about and its child pages. Apply root layouts and the children prop to support error handling across routes.

Learn how to handle errors inside layouts and the root layout in Next.js by using error boundaries and a global error page, tested in production with query params.

Shows how to recover from errors in a Next.js app by refreshing the router with use router from next/navigation and start transition, then calling reset to rerender.

Create generic and blog-specific 404 not-found pages in Next.js, handling unmatched routes and missing blog slugs. Use notFound from next/navigation to guide users to existing posts.

Explore images and image optimization features in Next.js, and learn how images affect site speed, core web vitals, and Google positioning, using the Next.js image component to automatically optimize images.

Identify image challenges in web apps—large file sizes, diverse screens, bandwidth costs, low-end devices, and core web vitals—and address them with modern browser features and the next image component.

Explore Core Web Vitals, including LCP and CLS, and learn how Next.js and modern image formats like WebP optimize images to boost page performance and SEO.

Build an image gallery in a Next.js app by displaying photos from public/images in a two-column Tailwind grid, using object-cover with fixed-height containers and noting upcoming Next.js optimization with placeholders.

Explore how the Next.js image component automatically optimizes local images for different devices, delivering responsive, format-aware images via a Next.js endpoint to improve visual stability and page speed.

The lecture shows how the Next.js image element uses srcset and sizes to pick image width by viewport and device pixel ratio, enabling mobile one-column and tablet two-column layouts.

Prioritize above-the-fold images with the Next.js image component's priority flag to improve lcp. Use blur placeholders, adjust image quality, and enable lazy loading for off-screen images.

Measure core web vitals with Lighthouse in Chrome, including LCP; build production and start the site, fix errors, pre-render pages, optimize images, and improve performance, accessibility, and SEO.

Configure fonts and assets for your site, and integrate analytics and chat bot scripts. Add metadata and open graph images to include blog post title and reading time.

Optimize font loading with next font by self-hosting Google and local fonts, selecting latin subsets, and bundling during build to improve performance, privacy, and user experience.

Explore integration of external scripts in Next.js for analytics, maps, and chatbots. Use script strategies, onload handlers, and client components to optimize loading.

Learn how to define static and dynamic metadata for pages, including preview images for social media, to enhance shareability and visibility for articles.

Learn to define static metadata across pages in Next.js, including title, description, open graph attributes, and metadata base, using simple exports from layout or page.

Explore how to statically define metadata across root and nested layouts with per-page overrides and merging rules, and introduce dynamic metadata for blog posts.

Learn how to generate dynamic metadata in Next.js by exporting an async generateMetadata function that uses route params, search params, and parent data to set titles and descriptions.

Learn to generate dynamic Open Graph images for each blog post using Next.js, with automatically generated image data for social sharing, including title and description.