Next.js From Scratch

Create a new Next.js project with the create next app CLI and tailwind. Explore the setup from Node.js version requirements to tailwind config and the dev server.

Learn to set up a Next.js app layout and homepage with the app directory, including a main layout, home page, and global styles using tailwind directives.

Build a responsive Next.js navbar with authentication-aware menus, dropdowns, and active link highlighting using a navbar component. Integrate assets and next/image, and perform HTML-to-jsx tweaks for svg attributes and className.

Install MongoDB and mongoose, create a config/database.js to handle the connection, set strict query, and export the connect DB function for use in server components and API routes.

Create a dynamic single property page in Next.js by fetching the property by id, displaying the first header image, and wiring a header image component with a back link.

Implement authentication in Next.js with next-auth, using serverless API routes and cookies to manage sessions, with Google as provider and OAuth security benefits. Explore providers, sessions, and security features.

Format property data by extracting amenities and image names, then build a complete property object with type, name, description, location, beds, baths, square feet, rates, seller info, and images.

Create a custom error page in the app folder by adding error.jsx, mark it as client-side, and display something went wrong with the error details.

Implement a server action in Next.js that toggles adding or removing a property from the user's bookmarks, updates the saved properties page, and revalidates routes.

Show a contact form when logged in, using use form state or use action state to post messages with hidden property and recipient fields, and display success or error toasts.

Build a Next.js message display with a reusable message card, fetch messages from the database, show name and body, display email and phone, and provide mark as read and delete.

Build a Next.js pagination component with previous and next controls, dynamic page indicators, and disabled states on first and last pages, using server components, page size, and total items.

Explore implementing a lightbox modal for images on listing pages in Next.js using the photo swipe gallery, including installation and wrapping in gallery and item with href and open.