Next.js & React - The Complete Guide

Learn React.js from the ground up, mastering the fundamentals and core concepts through a complete demo project, and prepare to dive deeper into React, Remix, or Next.js.

Explore what React.js is, a JavaScript library for building interactive user interfaces. Compare imperative vanilla JavaScript with React’s declarative UI, where HTML blends into JavaScript and state drives interactivity.

Create a React project with built-in tools that transform and compile HTML and JavaScript into browser-ready code, enabling live preview, hot reloading, and a deployable website.

Learn to create React projects using Create React App or Vite, ensure Node.js is installed, run npx create-react-app or npm create vite, install dependencies, and start or preview the app.

Begin with the starting snapshot created by Vite, learn JSX and CSS imports, and see how transformed JavaScript renders hello world in a React setup.

Explore how React renders to the DOM using main.jsx, the role of package.json and imports, and how components like App return JSX to build a modular UI.

Build your first custom React component by creating a post component, exporting it, and using it inside the app component with proper imports, JSX, and uppercase naming.

Select random name from an array using Math.random and render it with JSX curly braces to output dynamic values in React, as chosenName alternates between Maximilian and Manuel on reload.

Learn how to reuse a post component by rendering it multiple times inside a root element, while respecting React rules like a single root, self-closing tags, and wrapping siblings.

Learn to make components reusable by passing data with props, configuring a Post component with author and body props, and using a single component instance with different values.

Explore inline styles vs CSS files and prefer CSS modules for component-scoped styling. Import Post.module.css as a styles object and apply guaranteed unique classNames via the classes map.

Build a reusable posts list component with CSS modules, rendering an unordered list of two posts. Wire the posts list with proper imports and switch the list item to li.

Learn React state by building a new post form that updates text and author in real time, import the component, and wrap with a fragment; observe htmlFor and className.

Learn how React manages dynamic states and updates the UI as users type, by using declarative event listeners like onChange and onKeyDown, and passing handler functions as props.

Store the textarea input as a state value with useState, update it via setEnteredBody on each keystroke, and render enteredBody in a paragraph to reflect changes in the UI.

Lift state up to a common parent to share data between components, using useState and props to pass onBodyChange and onAuthorChange handlers, enabling dynamic user interface updates across posts.

Learn to build a reusable React Modal wrapper around content using the children prop, enabling an overlay with backdrop and modal styling, and the open prop for visibility.

Control modal visibility using useState, toggle via backdrop click, lift state up to the posts list, and render the modal conditionally with a ternary or logical &&.

Learn to build a shared header that opens a post modal, lift state up to the App, and manage modal visibility with props and handlers, including react-icons integration.

Add a submit and cancel button to the new post form, prevent default submission, and wire cancel to a prop that closes the modal while submit adds a new post.

Learn to handle form submission by wiring an onSubmit handler, prevent default behavior, collect author and body into postData, and dynamically render the updated posts list while closing the modal.

Update the posts state with a function form of setPosts to add new posts from previous state. Pass addPostHandler via props to update the list and render each post item.

Map the posts array to JSX elements using post.author and post.body, assign a unique key to each item, and render a no-posts message when the list is empty.

Discover how to add a backend to a React single-page app, using a Node and Express REST API to store posts in post.json and fetch or create them.

Send post request from a React app to a backend using fetch to /posts on localhost:8080 with a JSON body and content-type header. The backend stores the post in posts.json.

Fetch posts on initial render using useEffect to perform side effects safely, avoiding infinite loops by using an inner async function and an empty dependency array.

Implement a loading state with useState to show a loading message while fetching posts, differentiating between no data and loading to enhance user experience in Next.js and React app.

Explore routing in a React app by using React Router to load different components for distinct paths, enabling client-side navigation with react-router-dom installation.

Create multiple routes for the starting page, new post page, and post detail page using react-router-dom and createBrowserRouter, with layout routes for a modal overlay.

Master layout routes in a React app by creating a RootLayout with a shared MainHeader and using an Outlet from react-router-dom to render nested routes.

Refactor the app into a posts route by moving the component into the routes folder, and nest the post component as a route rendered as a modal overlay with outlet.

master linking and navigating between routes in a react app with react-router-dom, using Link to avoid page reloads and useNavigate for programmatic modal and backdrop navigation with relative paths.

Explore data fetching with react router 6.4+ using a route loader that fetches posts and exposes data via useLoaderData, reducing component state and useEffect usage.

Learn how to submit data with React Router actions in a create-post route, replacing local state with a Form component, extracting form data via formData, and redirecting after submission.

Implement dynamic routes with a path parameter to load post details via a loader. Navigate by id links and render the post details component using loader data.

Build a demo app with routing to create, view, and load post details, while mastering React essentials like props, components, state, useEffect, and React Router.

Refresh your React knowledge by exploring core concepts like components, props, state, effects, and context using functional components and hooks, preparing you for NextJS concepts.

Learn what React.js is, why it's used, and how it enables a client-side JavaScript library to build interactive user interfaces in the browser.

Explore how React simplifies building interactive UIs by replacing verbose imperative DOM manipulation with declarative components, demonstrated with a todo item and a modal overlay.

Discover how React and JavaScript enable single-page applications by controlling the whole page, delivering smooth navigation without new HTML requests, and practice with the meetup project.

Explore alternatives to React.js, including Angular and Vue.js, noting React's component-based lean approach and Angular's built-in features with TypeScript and Vue's routing.

Create a new React project with Create React App, learn the build step and development server, and run locally using npm start with Node.js behind the scenes.

Set up a code editor for the React project using Visual Studio Code, customize themes, install extensions like Prettier, and configure formatting to improve readability.

Dive into a created React project by cleaning up starter files, installing dependencies with npm install, and launching a development server with npm start on localhost:3000.

Explore how React components work by writing JSX in JavaScript, importing ReactDOM, and rendering a function that returns JSX into the root element.

Create a todo component in React with Next.js, structuring HTML-like JSX using divs and headings, adding a delete button, and styling with CSS classes like card, actions, and btn.

Learn how to build and reuse React components by creating a Todo component in a separate file, exporting and importing it, and rendering configurable todos using data.

Learn to pass data into a React component using props, create a reusable Todo that renders dynamic text with props.text and JSX expressions, and respond to a delete button click.

Learn how to handle events in React by using the onClick prop on buttons, passing a function without parentheses, and rendering a conditional overlay based on user interaction.

learn to structure a modal overlay by creating separate modal and backdrop components, import them into app.js, and render an interactive UI with small, maintainable components in React.

Learn how to manage state with useState to open and close a modal in a todo app, using conditional rendering in JSX to show modal and backdrop.

Learn how to control modals in React using event props by wiring Backdrop and cancel and confirm actions through onClick handlers. Use props to build reusable components with state-driven visibility.

Add client-side routing with react-router-dom, introducing browser router, route, switch, and exact to map URLs to the all meetups, new meetup, and favorites pages.

Create a main navigation component in a layout folder, render a header with React Meetups, and use react-router-dom Link to navigate to /, /new-meetup, and /favorites without reload.

Learn how to scope styles to individual components using css modules in React, including naming files with .module.css, importing as a classes object, and ensuring unique class names for components.

Learn to render a list of dummy meetups by mapping an array to JSX in a Next.js and React page, and assign a unique key to each item.

Develop reusable, data-driven components by creating MeetupItem and MeetupList that render dynamic props (image, title, address, description) and map meetups for a maintainable, card-styled list with CSS modules.

Create a reusable wrapper card component to style diverse UI elements. Use props.children to wrap JSX content and compose a layout that wraps routed pages with a layout component.

Learn to build a functional meetup form with React and Next.js, connect inputs to a server, validate data, and style with modular CSS for a reusable card layout.

Prevent the browser default on form submissions and handle the process with React and JavaScript. Read user inputs with refs, build a meetup data object, and prepare for server submission.

Explore sending meetup data from a React frontend to a backend api using Firebase as a dummy backend, posting json via an addMeetupHandler function and props.

Send http post data to Firebase using fetch; configure method and body as json, set content-type, stringify data, and store meetups in Firebase real-time database.

Trigger programmatic navigation after form submission using the useHistory hook from react-router-dom. Use history.push or history.replace to navigate to the root path, ensuring the user cannot return to the form.

Fetch firebase data on page load, handle the json response, and manage isLoading and loadedMeetups to display the retrieved meetups.

Use the useEffect hook to run code conditionally with a dependencies array, fetch Firebase data, manage loading, and transform the returned object into an array of meetups.

Learn how to implement a global favorites state with React context, create a favorites context and provider, and wrap the app to update UI without prop drilling.

Update favorites in React by using functional state updates: addFavoriteHandler uses prevUserFavorites and concat to add a meetup, removeFavoriteHandler filters by meetupId, and itemIsFavoriteHandler uses some to check presence.

Explore sharing state and actions across components with a favorites context, exposing add, remove, and is favorite handlers via use context in a meetup item and pages.

Learn to display user favorites in a next.js and react app using context. Consume FavoritesContext with useContext, render a MeetupList of favorites, and show a live total badge in navigation.

Explore the core React concepts—state, useEffect, context, components, and props—through a routing and forms demo, and set the stage for deeper exploration in the course.

Explore core NextJS concepts through a demo food lover community project, enabling you to browse and share meals while learning routing, pages, components, data fetching, and page metadata.

Explore the NextJS essentials, including the app router and core NextJS concepts, by creating a new project, running npm install, and previewing with npm run dev.

Learn how the app folder defines pages with Page.js, and how Next.js treats Page.js as a server component that renders on the server and sends JSX to the client.

Add a new /about route by creating an about folder with a page.js in Next.js, exporting a component to render content using server components via the app directory routing.

Explore how Next.js 15 handles internal navigation by using the Link component instead of a plain anchor, enabling a seamless single-page experience with server-rendered pages and client-side updates.

Explore how Next.js 15 uses root and nested layout files with the page content, rendering via the children prop, and how metadata sets the title and description.

Discover how Next.js 15 uses reserved file names like page.js and layout.js, creates routes, and uses custom components with a components folder and icon.png favicon.

Configure dynamic routes in Next.js 15 by creating nested folders with square brackets and using route parameters from props to render blog posts based on the slug.

Begin the main Foodies app project in Next.js 15 and React, using updated assets, public images, styles, and a layout with an svg graphic behind the header.

Create three new routes in your Next.js project: /meals, /meals/share, and /community, each rendering a simple React component. Add a dynamic /meals/[slug] route for future meal details.

Learn to build and navigate Next.js routes with a file-based router, creating meals, share, and community pages, plus a dynamic /meals/[slug] route.

Explore how NextJS layouts wrap pages, including nested layouts and the root layout, use the children prop to render page content, and implement a shared header and navigation.

Add a shared header by creating a separate main-header component, importing a logo from assets, and wiring navigation links to meals and community pages in a Next.js layout.

Learn styling Next.js and React apps by comparing global CSS, Tailwind, and CSS modules; import a .module.css file and apply scoped classes to header, logo, and navigation.

Enhance image output with the Next.js image component by lazy loading, responsive sizing, and automatic format selection, using imported images and the priority prop for fast load.

Learn to extract the header background into a dedicated MainHeaderBackground component, convert its CSS to a module, and organize header files into a main-header subfolder for a cleaner Next.js layout.

Populate the starting page by adding a header, hero, and call-to-action with links to join the community and explore meals, using app/page.js and styles from page.module.css.

Create a client-side image slideshow component in Next.js 15 that cycles through food images every five seconds using use state and use effect, while addressing client versus server component constraints.

Discover how Next.js renders React server components by default, contrasts them with client components, and explains how the use client directive enables client features for performance and SEO benefits.

Extract a NavLink component and its CSS module, convert only that piece to a client component, and use usePathname to highlight the active path like /meals or /community.

Create a meals page that outputs meals via a meals-grid and meal-item components, uses dynamic routing for meal details, and handles images with next/image fill when dimensions are unknown.

Set up a SQL light database with the better-sql light three package, create a meals table seeded by initdb.js, run with node, and load meals into the page.

Leverage Next.js server components to fetch data directly from the database, avoiding useEffect, by implementing a meals data module with better-sqlite3 and returning all meals to the user interface.

Create a loading.js component next to a data-loading page that becomes active during data fetches to show a fetching meals indicator, styled with loading.module.css for a smoother navigation.

Learn to use React Suspense and Next.js streaming to render a header instantly while fetching meals, show a fallback during data loading, and progressively stream content.

Learn to implement error handling in Next.js by adding an error.js client component that catches page errors and shows a custom message like failed to fetch meal data.

Learn to handle invalid URLs with a custom not-found.js in Next.js 15, catch all not-found errors at the global level, and deliver a tailored not found page.

Fetch and render meal details in a Next.js 15 and React app using the meal slug, displaying the meal image, title, creator mailto link, summary, and HTML instructions.

Implement not-found handling for missing meals in Next.js 15 and React using next/navigation notFound to render a meal-specific not-found page.

Implement a share meal form in the Next.js app, using the prepared Page.js component to render a header, labeled inputs, and an image picker, with CSS styling for visuals.

Learn to build a custom image picker component in React and Next.js 15 that hides the file input, triggers it with a button, and shows a preview after selection.

Learn to implement an image preview by managing picked image state, handling input change, converting the file to a data URL with FileReader, and rendering a Next.js image preview.

Learn to handle form submissions in Next.js using server actions by wiring the form's action to a server function that runs on the server and receives FormData.

Learn to store server actions in separate files with a top-level use server directive, import them into client components, and store data and images as described.

Implement a save meal function in meals.js that creates a lowercase slug from the meal title using slugify, and sanitizes meal.instructions with xss to prevent cross-site scripting before storing.

Store uploaded images in public/images with a slug-based filename, write the file using node fs, and save the meal data to the database before redirecting to /meals.

Learn to use React's useFormStatus (from react-dom) to reflect form submission in Next.js by adding a client component MealsFormSubmit inside the form, showing 'Submitting' and disabling the button.

Implement server-side validation in Next.js 15 and React using an isInvalidText helper to check meal fields—title, summary, instructions, creator, creator_email, and image—and prefer inline errors over discarding input.

Learn to handle validation with server actions by returning serializable response objects, and manage them with useFormState in a client component to display error messages.

Learn how Next.js builds for production, pre-renders non-dynamic pages, and caches them to speed up first visits. Explore why new data may not appear after deployment due to aggressive caching.

Learn how to control Next.js cache behavior by using revalidatePath to invalidate specific routes, revalidate the meals path, and optionally revalidate layouts to refresh nested pages.

Understand why Next.js production servers ignore new images in the public folder due to .next caching, and learn the recommended solution of external storage like AWS S3 for run-time files.

Add static metadata in Next.js 15 by exporting a metadata constant in layouts or pages to set title and description. Nested and page-specific metadata override root settings.

Learn to generate dynamic metadata in Next.js 15 by exporting an async generateMetadata function that uses page props, including mealSlug, to fetch a meal and return a title and description.

Master Next.js app routing with file-system routes like page.js and layout.js, and dynamic paths via server components. Learn client components, server actions, form handling, and data caching with revalidatePath, metadata.

Explore deeper routing and page rendering in a Next.js demo, revisiting routing patterns, naming files, and organizing folders, and examining server components, React server components, and client components.

Set up a brand new Next.js project, install dependencies, run the dev server, and build a simple two-page news site with a header linking home and news.

Add a news page and a dynamic /news/[id] detail page in the app directory using page.js and a [id] route, with internal links via next/link and params.id output.

Implement a reusable main header component with home and news links, integrated into the root layout via a path alias in Next.js, illustrating component organization and layout usage.

Style a Next.js app with an updated header, a layout wrapper, and a dynamic news list and detail view using dummy data and slug-based routing.

Add global and nested not-found pages in Next.js with not-found.js, export a NotFoundPage, and use next/navigation's notFound to render custom fallbacks for missing routes.

Set up parallel routes in Next.js 15 to render archive and latest on a page using a layout that provides archive and latest props from the @archive and @latest folders.

Explore building parallel and nested routes in Next.js, adding a dynamic year filter to an archive, wiring helpers and a NewsList component to show year-specific and latest news.

Configure catch-all routes in Next.js 15 to handle archive paths by converting a dynamic route into a catch-all with two square brackets and a filter.

Learn to implement catch-all routes to power a filterable news list by selecting year and month from a filter array, with graceful undefined handling and dynamic links.

Explore adding error handling in a Next.js catch-all route by validating the selected year and month against available years and months, and throwing an invalid filter error when mismatches occur.

Add a custom error.js to your Next.js page to render a client component error fallback on both server and client sides, replacing the default overlay.

Explore how NextJS distinguishes server components from client components, use path name to highlight active links, and implement a small client nav link component to keep server components lean.

Explore interceptor routes and nested routes inside a dynamic slug in Next.js to display a full-screen image from a news item via /news/[slug]/image.

Learn how intercepting routes work in Next.js 15 and React, enabling different pages based on how you navigate, with parallel routes for modals or full-screen views.

Learn to combine intercepting routes with parallel routes in Next.js by rendering a modal overlay over a detail page using a shared layout, modal backdrops, and a default page.

Learn to navigate programmatically in Next.js by using the use router hook from next/navigation to trigger back navigation when the backdrop is clicked.

Explore route groups in Next.js 15 to apply separate root layouts for the landing page and other pages by organizing routes into content and marketing groups.

Learn how to create API route handlers in Next.js to serve data and accept requests without rendering pages, using route.js, GET, POST, PATCH, and PUT methods, and JSON responses.

Explore how middleware works in Next.js by exporting a middleware function in middleware.js, returning NextResponse, and using a config matcher to target routes and handle redirects or authentication.

Explore all Next.js routing patterns covered in this module and understand when to apply them in practical Next.js applications.

Learn how to fetch data in Next.js applications by loading from external APIs or databases and files instead of hard-coded dummy data.

Add a backend folder from a sip file, run npm install, and simulate a rest api for the Next.js app using sqlite data.db pre-populated with dummy_news via GET /news.

Learn how to fetch news data from a separate backend in a Next.js app using client-side data fetching with fetch and useEffect, including loading and error handling.

Learn how to fetch data directly inside server components in Next.js 15, replacing client-side fetch with async component functions, for simpler code and improved SEO.

Learn how to simplify architecture by fetching data directly from a local SQLite database in a Next.js app using React server components, eliminating the separate backend and extra HTTP requests.

Show a loading fallback in Next.js by simulating a slower data fetch with a two-second async delay and implementing a loading.js file to display a fallback until data arrives.

Migrate the app from dummy data to a local database in Next.js 15, using getNewsItem and async server components, with loading fallbacks.

Learn granular data fetching with suspense in Next.js 15 and React, implementing server components and targeted loading fallbacks for year and month filters.

Explore data mutation in Next.js 15 by learning how to create and update data with server actions, using server-side fetches from external sources or your own database.

Explore starting a new Next.js 15 project, running it locally, and handling data mutations with a post submission form that saves to a sqlite database via server actions.

Explore server actions and form actions in Next.js and React to handle submissions with formData and input names like title, image, and content.

Convert a client form action into a server action by adding use server and making the function async, so Next.js handles submissions on the server and extracts data.

Store posts in the database by constructing a post object with image URL, title, content, and user id, calling storePost, and validating via the feed page's getPosts data.

Learn to provide user feedback for form submissions in Next.js 15 and React by awaiting the server post, using the use form status hook, and redirecting to /feed.

Explore client-side and server-side form validation in Next.js 15 and React using the useFormState hook to surface error messages from a server action.

Learn how to structure a post form with a separate PostForm component, pass a server action through props, and handle useFormState with updated formData arguments and real-time error feedback.

Store server actions in a separate actions file, export them, and import into components to keep NewPostPage lean, support multiple actions, and simplify server action management.

Integrate cloud-based image uploads in your Next.js app using Cloudinary and environment variables. Store image URLs in the database and verify in the feed.

Explore how to implement a like button using Next.js server actions, including hard-coded user IDs, an isLiked flag, and togglePostLikeStatus to update the likes table.

Learn how Next.js caches page data and uses revalidatePath to refresh pages when data changes. Configure paths to revalidate the feed route and, if needed, pages via the root layout.

Discover how to implement optimistic updates in Next.js and React using useOptimistic to instantly update post likes, then sync with the server and roll back on failure.

Explore how NextJS 15 production caching and pre-rendered pages affect data mutations, using server actions and revalidatePath to refresh posts in real time.

Explore how Next.js caches data and pages, learn how to revalidate or discard cached data to show updated information, and control caching based on data sources.

Explore how Next.js caching works across four areas—request memoization, data cache, full route cache, and client-side router cache—and how Next.js 14 vs 15 affects revalidation and performance.

Set up a two-project NextJS app with a separate backend to explore caching and requests. Run both servers and visit /messages to observe how NextJS caches data.

Explore how Next.js request memoization prevents duplicate backend calls by unifying fetch configurations, then observe a single request reused across page and layout.

Examine how Next.js manages data caching with fetch, contrasting force cache in v14 and no store in v15+, and apply revalidate and Next.js settings to control caching.

Configure data caching in Next.js 15 by exporting file-wide constants like revalidate and using dynamic, force dynamic, or unstable no store to tailor caching per file or per component.

Explore how Next.js pre-renders and caches full routes at build time, and how force dynamic disables caching to render on demand, with revalidate to update pages.

Learn how to invalidate Next.js cache on demand using revalidatePath and revalidateTag, balancing aggressive caching with immediate data updates for specific paths and tags.

Enable request deduplication for a custom data source in Next.js by wrapping getMessages with React's cache function, reducing repeated database calls on page reload.

Wrap your data-fetching function with unstable_cache (aliased as nextCache) to enable request deduplication and Next.js data caching for custom data sources, and specify cache keys for effective caching.

Learn how to invalidate custom data source caches in Next.js using revalidatePath or revalidateTag, ensuring new messages render immediately after updates.

Learn how NextJS caches data. Fetch with an external API, revalidate path or tag, and leverage React's cache function for deduplication and Next's unstable cache for aggressive caching.

Explore two key optimization opportunities in Next.js applications: image optimization and metadata for SEO, using a Cloudinary-based snapshot.

Use the next/image component to optimize images by automatically delivering smaller files in optimal formats and loading them only when visible, improving visual stability and page speed.

Explore how the Next.js image component uses the full imported image object for src, and how height, width, lazy loading, and srcset enable responsive images and prevent layout shifts.

Explore how Next.js image derives width and height, and use the sizes prop to resize images responsively, or manually override width and height for specific cases.

Learn how the Next.js image component defaults to lazy loading and how the priority prop preloads header images that load immediately, with notes on runtime user-added images and optimization.

Learn to optimize user generated images in Next.js 15 using the next/image component, decide when to set width and height vs. fill, and configure remotePatterns in next.config.js.

Configure the next/image fill prop by making the parent container relative and assigning explicit width and height, ensuring the image positions absolutely and is properly optimized.

Learn to use the Next.js image loader with Cloudinary to generate on-demand resized and optimized images by transforming the image URL, controlling width, height, and quality.

Learn how Next.js enables page metadata to boost SEO and performance, using static and dynamic metadata to optimize how your site appears to search engines.

Export a metadata constant from page.js or layout.js to set the title, description, and open graph fields for Next.js pages, guiding search results and social previews.

Learn how Next.js 15 enables dynamic page metadata with the generateMetadata function, using data such as the post count to craft a dynamic title and a static description.

Learn how to set metadata in Next.js 15 using static constants or dynamic generateMetadata, and apply it via layout.js to provide merged or overridden metadata across pages.

Explore authentication in Next.js by building user sign up, login, credential validation, and route protection for authenticated users.

Set up a brand-new starting project and run the development server to view the login and trainings pages. Explore authentication via the auth-form and manage users and sessions in sqlite.

Learn to implement user signup with server actions in Next.js, extract and validate email and password, show errors, and prepare storing new users in the database.

Learn how to create a new user in a SQLite database using a prepared statement, and understand why hashing passwords is essential to avoid plain text storage.

Hash passwords with the hash.js module in the lib folder, using Node.js functionality to create non-reversible hashes for signup and login, and verify logins by rehashing input against stored hashes.

Wrap user creation in a try/catch to enforce the unique email constraint, returning an email error on duplicates and redirecting to the training page after signup.

Learn how authentication works by logging in, verifying credentials, and marking users as authenticated with a server-side session. See how protected resources rely on a session cookie and session IDs.

Explore choosing a third-party auth package for Next.js, focusing on Lucia for straightforward authentication, installing lucia and adapter-sqlite to store sessions in SQLite, then start implementing with code.

Create a new Lucia auth instance by importing Lucia and wiring it to a BetterSqlite3Adapter using your db.js database. Configure the session cookie (expires false) and HTTPS enforcement for production.

Create a Lucia auth session for a user and store it in the sessions database. Set the session cookie on the outgoing response with Next.js cookies using the session ID.

Create an auth session after signup by calling createAuthSession with the user’s ID, then redirect. Store the Lucia cookie in the browser and attach it to requests for page protection.

Implement verifyAuth to validate the incoming session cookie with Lucia, returning a user and session or null, and refresh or clear the cookie as needed.

Protect pages with verifyAuth before rendering, redirecting unauthenticated users to the starting page. Use the result object's user and session data to guard access via an authentication cookie.

Switch between login and signup modes using query parameters in Next.js by reading searchParams.mode and adjusting links and AuthForm behavior accordingly.

Add a login server action that fetches the user by email, validates the password with hash.js, returns form errors on failure, and starts an auth session on success.

Trigger server actions by passing a mode parameter to an auth action that routes between login and signup, using the bind method to pass data and a header with logout.

Create an auth-only layout using a route group in Next.js 15 to apply a logged-in header and a logout button across pages that require authentication.

Implement a user logout in Next.js 15 by creating a server action that destroys the session with Lucia, clears the cookie, and redirects to the login page.

Review essential and advanced Next.js features, including rendering pages, routing, data fetching, mutations, validation, optimization, caching, file uploads, authentication, and continue by studying official docs and building demo projects.

Explore Next.js app router versus pages router, learn why app router is future with server components, while pages router remains stable for legacy projects and full stack apps.