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.

Add metadata to pages by defining a metadata object in the layout, including title, keywords, and description meta tags, while using server-side rendering and managing assets.

Learn file-based routing with Next.js app router, including nested routes like /properties and /properties/add, dynamic id routes, and catch-all patterns. A key SSR feature; use Link for fast client-side navigation.

Compare server and client components in Next.js, understanding server rendering by default and when to use client components for interactivity and hooks.

Create a client component using use client, and explore next navigation hooks like useRouter, useParams, useSearchParams, and usePathname to access route data in client and server components.

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.

Enhance the Next.js from scratch nav bar by converting anchors to next/link, adding a google icon with react-icons, and implementing mobile and profile dropdowns with use client and useState.

Learn to implement active navigation links in Next.js using usePathName for dynamic background highlighting, and conditionally render menu items based on login state for desktop and mobile menus.

Build a Next.js home page with reusable components: hero, info boxes, and a footer. Learn to pass props for headings, text, tailwind colors, and buttons, and implement a dynamic year.

Build a properties page in Next.js and a reusable property card component, using properties.json data (and later import into MongoDB), with responsive grid and dynamic image, pricing, and location details.

Build Next.js home property listings from a JSON source with a reusable home properties component and a property card; show three items and a view all properties link.

Create not found and loading pages as core Next.js features by adding not-found.js and loading.js in the app folder, and implement a ClipLoader spinner from React Spinners.

Set up a MongoDB Atlas cluster, create a Property Pulse database and properties collection, generate the connection string, and configure a .env file to store the MongoDB URI.

Discover how to use MongoDB Compass to download, install, and connect to the pulse database. Import properties two JSON data and set up a config file to run queries.

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 user and property models with mongoose in Next.js from scratch, including email, username, image, bookmarks, owner, and a property schema with location, beds, baths, amenities, rates, images, and is_featured.

Fetch properties from MongoDB in a Next.js server component by connecting the database, using the property model, and lean queries for performance; display the three most recent on home page.

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.

Build a property details component in Next.js from scratch, wiring a property prop to render type, name, location, rates, beds, baths, square feet, description, and mapped amenities with icons.

Learn how to create and use API routes in Next.js to fetch data from a database, return JSON responses, and build routes for listing and retrieving properties.

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.

Set up Google OAuth for a Next.js app by creating a cloud project, granting client id and secret, configuring redirect URI /api/auth/callback/google, and adding google_client_id and google_client_secret in .env.

Implement next auth with a Google provider in a Next.js app, configure a catch-all api/auth route, export the auth options, and wrap the app with a session provider.

Add a next-auth sign-in button configured with the Google provider (client id and secret); fetch providers with getProviders via useEffect and render a navbar sign-in option.

Connect the database and check if a user exists by email; if not, create the user with trimmed username, email, and image. Then attach the user id to the session.

Display the user’s Google profile image in the nav bar by using the session image with optional chaining, and configure Next.js to load remote images from googleusercontent via next.config.js.

Implement a sign out with an on click handler that calls signOut from next auth, closes the profile menu, and protects routes so unauthenticated users cannot access add property.

Protect routes with next auth by adding a root middleware and a matcher config to require sign-in for pages like /properties/add, /profile, /properties/saved, and /messages.

Create a property add form component in Next.js from scratch course, import it into add properties page, and style the section while preparing to submit via a server action.

Learn to use server actions in Next.js to run server-side functions, submit forms directly via the action attribute, and handle form data with get and getAll.

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 utility get session user in utils to fetch user from the session via getServerSession and auth options, returning the user and id for use in add property action.

Remove the try-catch from getSessionUser to simplify session retrieval. Use server session to return null and then the user and user ID, preventing deployment errors on Vercel.

Connect to the database, fetch the session user, and validate a user id. Create and save a new property, revalidate the cache, and redirect to the new property's page.

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.

Configure cloudinary in a Next.js app, upload images as base64 to the Property Pulse folder, and store the resulting image URLs in the database.

Learn to display cloudinary images on property cards and header images by updating next.config, adjusting the property images array, and cleaning listings to use cloudinary URLs.

Create a property images component in the Next.js from scratch course, rendering Cloudinary images in a responsive grid or full-width when single image, with conditional grid spans for multiple images.

Create a profile page in a Next.js app that displays the logged-in user's image, name, and email. Enable edit and delete actions for the user's listings.

Learn to fetch and render a logged-in user’s property listings in Next.js, build a client profile properties component, and prepare for edit, update, and delete actions.

Create a convert to serializable object utility to turn lean MongoDB documents into objects by applying two JSON methods or to string method when needed for server and client components.

Delete property server action removes the listing and its Cloudinary images after ownership verification, then revalidates the page; the profile button updates the UI to remove the deleted item.

Add toast notifications to Next.js apps by installing react-toastify and configuring a toast container in the layout. Trigger a success toast after delete actions, showing 'property deleted successfully'.

Build a property edit flow in a Next.js app with a prefilled edit form. Fetch data, convert to a serializable object, and apply default field values for update.

Implement a Next.js server action to update a property from the edit form, verifying ownership, updating the database, and revalidating the path before redirecting to the updated page.

learn to geocode a property address to latitude and longitude for a next.js detail page using google geocoding with react-geocode, set up api keys, and create a property map component.

Display a Mapbox map in a Next.js app by configuring a Mapbox token, importing Mapbox GL and react-map-gl, and rendering a marker with a pin image.

Add a right sidebar to the property page featuring a bookmark button, share buttons, and a property contact form, wiring in components and icons and applying styles.

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.

Handle bookmark button clicks by calling the bookmark action, validating the session with useSession, and showing toast feedback on success or sign-in requirement.

Learn to implement a bookmark status button in a Next.js app by adding state and a check bookmark status action, display blue bookmark or red remove bookmark based on status.

Create a saved properties page that fetches the user's bookmarks, populates them with property data, and renders them as cards in a responsive grid; no saved properties when empty.

Use the react-share package to add Facebook, Twitter, WhatsApp, and email share buttons, building a property page URL from an environment variable and hashtags like 'property type for rent'.

Create a reusable property search form as a client component in a Next.js from scratch project, manage location and type state, and redirect with query params to a search page.

Build a Next.js fetch search results page that reads url query params, builds a regex mongo query across name, description, and location fields, filters by property type, and serializes results.

Display search results by fetching properties and rendering them with a property card in a responsive grid, using a top search form.

Create a message model and add message action to store sender, recipient, property, and message body in the database, enabling recipients to view, delete, and mark as read or unread.

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.

Use the use form status hook to track form submission, showing 'sending' and disabling the button while pending, with a separate submit message button component and a paper plane icon.

Build a Next.js messages page that fetches read and unread messages for the logged in user, populates sender and property details, and renders an inbox prototype.

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.

Add a mark message as read action in Next.js, validate ownership, toggle the read flag, and revalidate /messages to update the UI and new badge in the message card.

Implement a delete messages action in Next.js by verifying ownership with the session user, deleting the message by id, and updating the message card with a toast on success.

Build a global context in Next.js to share an unread message count across components, wrap the app with a provider, and expose a hook for nav bar and mark-as-read updates.

Implement pagination for the properties page with a page query parameter. Compute skip as (page minus one) times pageSize and apply a limit of pageSize via mongoose find.

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.

Create a featured properties component on the home page that fetches is_featured listings from the database, renders them in a card grid, and links to detail pages.

Learn to deploy a Next.js app to Vercel from GitHub, push code, configure env vars and domain settings, redeploy, and validate features like login, search, bookmarking, and messaging.