Next.js React Ultimate Ecommerce Development

Learn to build api routes in Next.js using the app/api convention, creating route.js files under api folders to expose get endpoints that return json responses like the current time.

Sign up for Mongo Atlas, create a project and cluster, then copy the connection string and replace the password with your database user credentials, and store it in environment variables.

Learn to manage environment variables for Vercel deployment by centralizing them in a root config.js, importing into next.config.js, and gitignoring the file to connect to MongoDB via a db uri.

Create a utils/db-connect.js and install Mongoose and validator to connect to MongoDB using a db uri from env; export a connect function for serverless API routes in Next.js on Vercel.

Create a Mongoose user model with fields name, email, password, role, image, and reset code, enable timestamps and unique validation, prepare a register route, and support next auth login.

build a register api route in a next.js app to accept user data, hash passwords with bcrypt, connect to mongodb, create and save a user, and return a success message.

Create a register page in a Next.js ecommerce app, manage name, email, and password with useState, handle async submit, and send data to the backend.

Build a register form in a Next.js React app, handling submit and managing name, email, and password, with inputs, placeholders, and a backend submission, and console log to verify data.

Configure environment-specific API URLs for production and local development, then implement a register API request with fetch, JSON payload, and toast-based feedback.

Create a login page in a Next.js ecommerce app using next-auth signIn with email and password, handle errors with toast, and redirect on success.

Configure NextAuth using a credentials provider, implement password verification with bcrypt against a database, and expose a NextAuth handler with a secret and a sign-in page at /login.

Wrap the app with the session provider from next-auth/react to access logged-in user data via use session and render authentication-based navigation.

Learn to display the logged-in user status in a Next.js React ecommerce app by conditionally rendering login, register, and logout links, show dashboard with username, and implement sign-out with next-auth.

Explore how to implement a loading page in Next.js 13 by adding app/loading.js to show a loading state during page transitions and authentication status.

Explore how to customize the 404 page in Next.js by creating a not found file in the root directory and reloading to view the updated message.

Create a user dashboard and protect it with a next-auth middleware, ensuring only logged-in users can access dashboard routes and redirecting unauthenticated visitors to login.

Learn how to redirect users back to the page they intended to visit after login by extracting the callback URL from query parameters and applying conditional navigation.

Configure next auth with a Google provider, obtain client id and secret from Google developer console, update credentials and redirect callback, and add a sign in with Google button.

Save social login users to the database by using next auth callbacks to check by email and create a MongoDB user with name, email, and image.

Use jwt callbacks in nextauth to fetch the user by email and attach the full user profile, including the role, to the session and reflect it in the navigation.

Build a role-based admin area in Next.js, implementing dynamic redirects to /dashboard/admin or /dashboard/user, an admin layout with navigation, and protection of admin routes from regular users.

Protect admin pages by checking the user role with next.js middleware and with auth, restricting access to the admin dashboard and admin api routes, redirecting non-admin users to home.

Deploy a full stack Next.js app with authentication to Vercel, using env variables and production API URLs, and explore serverless functions and live deployment workflow.

Plan your e-commerce project by building a category model, then add tags and products using a consistent CRUD workflow, and save it as a base for future projects.

Create category api endpoints for admin users to create, list, update, and delete categories, using slugify to generate slugs and connecting to MongoDB.

Create a get function to list all categories by connecting to MongoDB, handling errors, and returning the categories sorted by created date so the newest appear first.

Create dynamic api routes to update and delete a category by its id using a [id] folder in next.js, and update slug from the name with new: true.

Implement the category delete function in the admin area, using find by id and delete, with context params id, error handling, and sending the deleted category to update the frontend.

Create a front-end category context to perform crud operations on the backend and power admin pages for creating and listing categories, with a useCategory hook for easy access.

Create a category via a post request to the backend, handle success or error responses, show toast notifications, and update the UI category list with the new data.

Fetch categories from the admin category endpoint, parse the response as JSON, check response.ok, handle errors with a toast, and update the state with the retrieved categories.

Update a category in a Next.js ecommerce app with a put request to the admin category endpoint, using the category id from state to handle success or error.

Delete a category by sending a fetch request with the delete method to the admin category endpoint, then filter it from the local categories and show a success toast.

Wrap your app layout with the category provider to expose the category context across pages, enabling access via the use category hook in any component.

Build the admin category page in the Next.js ecommerce app by adding a category folder and a categories page, plus two components: category create and category list.

Build a category create form for an ecommerce app that supports create and update via a category context, with a name input, tags like dresses or shirts, and API calls.

Build a category create/update form in Next.js React, with dynamic button styles and actions for create, update, delete, and clear, while managing state and preventing default on clicks.

Create robust category error handling in Next.js ecommerce apps by validating uniqueness, displaying concise messages, and aligning API responses with data payloads to improve admin feedback.

Fetch and manage categories in the admin interface by using context and useEffect to support create, update, and delete operations, preparing for tag creation with a parent category dropdown.