Complete Next.js Course For Beginners - All Concepts

Learn how Next.js maps files in the pages directory to routes, creates pages like posts, and uses Link, Head, and Script to enable navigation and manage metadata and assets.

Master static assets in next.js by using the public folder for images and other files, and adopt the next/image component for responsive, optimized loading to prevent layout shifts.

Learn to style Next.js apps with global CSS imported in the app component for universal resets, and use CSS modules for component-level styles with unique class names, plus optional Sass.

Learn how to use a layout component in Next.js to share a default header, footer, and content across all pages, print children, and customize titles with the head component.

Explore how Next.js uses static generation and server side rendering to pre-render HTML, improve performance and SEO, then run JavaScript to make the page interactive.

Explore static generation in Next.js, with and without data, and learn how getStaticProps runs at build time to fetch data and pass props to a page.

Explore how server side rendering uses getServerSideProps to generate page HTML on every request, contrasting it with static props and explaining when to use SSR for frequently updated data.

Fetch data on the client side in Next.js with useState and useEffect to load post data and render its title and description for pages not needing SEO indexing.

Understand how the app component serves as the entry point for pages, handles page props via get initial props, and enables a custom app to persist layout and inject data.

Leads you through dynamic routes in Next.js by using bracket files and external data to statically generate pages with getStaticProps and getStaticPaths, yielding dynamic URLs.

Learn how Next.js handles 404 errors with dynamic routes and a default 404 page. Create a custom 404 by adding pages/404.js and exporting a default function, and understand fallback behavior.

Learn to create api routes in Next.js by building endpoints in the api folder that return json data with status 200 and are consumed in components with fetch.

Explore dynamic routes in Next.js using brackets and catch-all parameters, access route values with the useRouter hook, and enable client-side navigation with router.push.

Explore building a navigation header in Next.js using the Link component, map over an array of routes, and handle dynamic routes with path names and query parameters.

Learn to fetch data with swr, handle loading and error states, and cache data for future visits using stale while revalidate.

Learn how to connect a Next.js Nexus app to MongoDB using Mongoose, build a schema and model, and store and fetch data via an API endpoint.

Explore how to validate an http request in a Next.js app, extract the method, and handle get and post requests with appropriate responses and allowed methods.

Learn how SWR's stale-while-revalidate strategy fetches fresh data while caching results, and build reusable data hooks with useSWR and a custom get data hook using LWR for fast server-side rendering.

Customize a fetch function with a url param that returns json or throws error, using swr with onError to limit retries to ten, skip 404, and revalidate after five seconds.

Learn to configure SWR with LWR config to fetch and refresh data in a static site generated page, using get static props, fallback, and refresh intervals for dynamic updates.