The complete guide to building a full-stack app with Next.js

Save your code in source control with Git and publish to GitHub, using VS Code to stage and commit changes, create repositories, and handle authentication.

Install and configure BetterAuth to power user login and registration, using env vars, a secret key, and a database-backed session store with Prisma, following the step-by-step docs.

Add a top-right user menu with an avatar as a dropdown, replacing login buttons for signed-in users, and implement sign-out with next.js router refresh to update the UI.

Explore an optional lesson showing how to run postgres locally on your dev machine with docker and docker-compose, including ports and volumes for persistent data.

Fix styling by removing card padding. Add a six-gap grid, enable eager image loading, and use date-fns to calculate age from dateOfBirth, then route to a member detail page (404).

Derive active section titles from the url and build a section title component within a Next.js member nav, using a cache function to de-duplicate getMemberByUserId calls.

Create a client-side like button in a Next.js app to call a server action, manage pending states with use transition, and prevent routing while updating the like status.

Add a server action to fetch target, source, and mutual likes, and display them as cards in a Next.js full-stack app.

Build a dynamic user profile section with editable profiles, image uploads, and a profile form for the current user, while hiding chat and updating navigation from the user menu.

Choose cloud storage with Cloudinary for image hosting, avoiding database storage; enable direct browser uploads via signed requests and save the image url and public id.

Explore using the Cloudinary cld image component in a Next.js app to display Cloudinary images with transformations—width, height, crop, gravity (face)—and fall back to Next.js image when needed.

Implement delete image functionality that removes the image from Cloudinary and the database, updates the UI with cache revalidation, and prevents deleting the main image by disabling the delete button.

Set up the messaging feature in section 7 by creating a many-to-many structure that lets users send and receive messages, mirroring the like feature.

Build a bottom-aligned chat form in a Next.js full-stack app, validate a message with a minimum length of one using a zod schema, and display messages above with overflow scrolling.

Create a chat interface by building a message box component that renders avatars, sender and recipient messages, and read status with conditional styling using clsx in Next.js.

Fetch inbox and outbox messages via a container query string, implement a reusable get messages by container with Prisma, map to a message DTO, and render on the page.

Master robust error handling in a Next.js full-stack app by building a reusable Prisma error handler and using toast notifications for message operations.

Implement real-time presence, chat, and notifications in a Next.js app using pusher and WebSockets while noting edge runtime constraints and available alternatives for higher concurrency.

Learn how to enable real-time chat and presence in a Next.js full-stack app using Pusher, including cloud setup, API keys, environment variables, and server-client integration.

Explore building a global presence store with Zustand in a Next.js app, tracking online members via Pusher events, and implementing a usePresenceStore hook with add, remove, and set methods.

Implement real-time notifications for likes in a Next.js full-stack app, rendering a clickable toast with the liker's image that links to the profile page.

Learn how to persist selected filter parameters by storing them in a cookie, read and restore the query string on return, and use router replacement to refresh the user interface.

Add an order by feature in a Next.js app by wiring the filters to the query string, implementing handleOrderBy, and configuring the select to sort by newest or last active.

Learn how to implement offset pagination part 2 in a full-stack next.js app by configuring page and page size, computing skip and take, and returning items with a total count.

Add page size selection to the offset pagination flow in a next.js app by wiring a set page size function, rendering page size options, and syncing total count and filters.

Implement a with photo filter toggle to display only users with a photo, using a Hero UI switch and the with_photo=true query string.

Enhance your full-stack app with authentication part 2 by implementing user registration, email verification, forgot password flows, and social logins with Google and GitHub, using NextAuth and Resend email service.

Develop a reusable text input component for Next.js forms using React Hook Form's useController, enabling labeled inputs, type-safe props, and integrated error handling; refactor register form to use it.

Improve form usability by implementing a gender radio group with Hero UI, React Hook Form, and accessible labeling. Style the options with a grid layout, icons, and error handling.

Explore completing the registration functionality by wiring sign up to create user and member data, using a database hook and router refresh to update the UI.

Implement email verification for email and password sign up by sending a tokenized link, verifying the token and email, and enforcing verification before sign-in.

Learn to implement forgot password with email tokens, reset links, and a dedicated reset-password flow, including routes and forms for secure password resets.

Implement a complete profile flow for social login by submitting the profile form, handling server response with toast messages, and routing to the members page upon success.

Register users with a two-step wizard using React Hook Form, verify emails, enable secure password resets with token links, support Google and GitHub logins, and prepare for role-based authentication.