Mastering NextJS + Interview Questions + E-commerce Project

Define routes in Next.js using the app router, create product and about pages with page.js under app, export default function components, and verify routes i.e., /, /products, /about.

Create a nested root under the about route by using nested folders, e.g., /about/settings, and implement a settings page by duplicating the about component and updating its text.

Replace plain anchor tags with Next.js Link to enable single-page navigation between home, products, and about routes. Import Link from next/link and convert anchors to links to avoid page reloads.

Explore how the app folder's route layout (layout.js) acts as a global layout, rendering pages as children and enabling a global header component.

Create a global header by moving links into layout.js, import the link component, and build a header in a components folder for integration into the Next.js app layout.

Learn how the import alias @ refers to the src folder, enabling simpler imports like @components/header instead of long relative paths, with configuration in jsconfig.json or tsconfig.json.

Configure favicon by placing image files named favicon, apple-icon, or icon with .ico, .jpg, or .png extensions, or by adding code in tsx; Next.js applies icons by file conventions.

Generate code-driven favicons with the Next.js OG library’s image response class to create dynamic images from js or tsx code, following icon naming and .js, .ts, or TSX extensions.

Import the next/image component and learn how it optimizes images, using public folder assets with two methods: path string in src or static import, plus width, height, and alt text.

Explore how the Next.js image component auto optimizes large server-stored images by delivering low-res copies (e.g., 1200 by 1200) to mobile devices, caching them on the server for faster performance.

Use the Next.js image component for automatic lazy loading, responsive sizing, and image compression to boost performance over the standard img tag.

Style a Next.js app with CSS modules to scope styles per component; create header.module.css, import as styles, and apply class names with only class or ID selectors.

Discover the benefits of css modules in Next.js, including locally scoped styles, conflict avoidance, and maintainability, and how global styling is applied via global.css in the main layout.

Build a quantity counter in a Next.js app and learn why useState needs a client component by adding use client, contrasting server components with client components and server-side rendering.

Distinguish client components from server components: client components render in the browser with JavaScript and events, while server components render HTML on the server without JavaScript.

Design and implement error pages in Next.js by creating a client component named error.js, handling errors, destructuring the error object, and displaying safe, custom messages.

Configure a custom not found page in Next.js by creating a not-found.js file in the app folder; it automatically renders for invalid URLs and shows a not found message.

Learn to implement dynamic routes in Next.js using a single [slug] route to render many product pages. Build links to /products/[slug], access route params, and render data from props.

Compare client-side data fetching with useEffect in client components to server component rendering for improved performance in Next.js.

Explore asynchronous server components in Next.js, fetch data with async components, eliminate useEffect and client components, render data directly from the server, and prepare a loading page.

Render data on the server with asynchronous server components to deliver fully rendered HTML, boosting performance and SEO. Eliminate client-side data fetching and extra JavaScript, simplifying code and improving scalability.

Create a loading.js under the app folder in Next.js to render a loading component with a 2-second delay, apply it globally, and add a products/loading.js for route-specific loading.

Explore an overview of sqlite, a lightweight, serverless database used in mobile apps, and learn to work with sqlite queries by installing a VS Code extension.

Explore SQLite storage classes such as integer, real, text, blob, and null, and how they define data types. Learn about five type affinities - integer, text, blob, real, and numeric.

Create and manage a serverless sqlite database by creating a file-based database, defining a products table, and performing CRUD operations via sql queries.

Build a mini Next.js e-commerce app that displays products on the home page, with edit, delete, and add options, using better-sqlite3, Tailwind CSS, and server actions.

Connect a Next.js app to a lightweight, serverless SQLite database using the better-sqlite3 driver, install it, and initialize a products.sqlite database with table creation and crud-ready setup.

Create a products table in SQLite with prepare to compile the query, run to execute, and all to fetch results after selecting from products.

Render product data in a Next app by querying a SQLite database with better SQLite three and displaying it on the products page. Centralize query logic in a database module.

Configure dynamic routes for all products by mapping database data to links and rendering individual product pages. Simplify styling while implementing crud operations with sqlite3.

Refactor the code to make the products page the home route, remove the about page, and establish product detail routes, while enabling add, edit, and delete product flows.

Integrate Tailwind CSS into a Next.js project by installing Tailwind, PostCSS, and Autoprefixer, initializing the config, setting up path globs, and including Tailwind directives in globals.css.

Create an add product interface in a Next.js app by building a form with name, price, and image fields, styled using Tailwind CSS forms and grid layout.

Handle form submissions on the server using Next.js server actions with the use server directive, automatically receive form data, prevent page reload, and work with server components.

Execute a server action to insert a new product into the database using better sqlite3, then redirect to the products page with Next.js redirect after a successful insert.

Create a responsive products grid by building a product card component, mapping over products to render cards, and adding edit and delete actions with the Next.js image component.

Compare css grid and flexbox for creating product grids, highlighting two dimensional versus one dimensional layouts and the performance trade-offs for responsive design.

Implement delete product feature using server actions and client components; wire onclick to pass product id, split server and client code, and refresh the DOM after deletion.

Implement the edit product feature in a Next.js app by building a dynamic edit route, fetching product data by id, pre-filling the form, and updating SQLite via a server action.

Learn how Next.js caching builds incredible performance by using request memoization, data caching, full root cache, and router cache to minimize server requests.

Explains caching basics and types (browser, server-side, content delivery, network, database, and application caching) and Next.js mechanisms: request memoization, data caching, full root cache, router cache.

Learn how Next.js caches in production by classifying files as static or dynamic; static pages can render stale data, so make the products page dynamic.

Make a Next.js products page dynamic using dynamic routes, fetch calls, and route segment config; understand cache control and time-based caching.

Explore how to make a Next.js page dynamic at build time through dynamic routes, dynamic functions, and route segment config options, including fetch usage and revalidate settings.

explore time based caching in next.js with the revalidate option to rerender pages and refresh data; use revalidate with fetch for on demand cache control.

Explore time based cache control to keep data fresh by automatically revalidating pages after a set interval, using route segment config revalidate or the fetch method with revalidate options.

Revalidate the home page on data changes by using the revalidate path in Next.js, applying on-demand updates for add, edit, or delete via page or layout revalidation.

Understand revalidating pages or layouts with the Revalidate Path method, including its two arguments—path and revalidation type (page or layout)—and why path-based revalidation outperforms time-based cache control.

Use the revalidateTag method to refresh cached data on demand by tagging related data, enabling granular, centralized updates triggered by fetch requests or webhooks.

Explore how the revalidate tag method, like revalidate path, revalidates a page on API calls by tagging fetch requests with a cache tag to refresh shared data.

Compare app router and pages router in Next.js by outlining folder structures, server versus client components, dynamic layouts, and performance and data fetching differences.

Explore the Next.js app router vs pages router. App router uses nested folders and server components with dynamic layouts, delivering better performance and flexible data fetching; pages router relies on static layouts and client components.

Explore how the pages router supports file-based routing, including defining routes with components, nested routes like /products and /products/apple, and dynamic routes with square brackets.

Explore how to access dynamic paths and the url slug using Next.js app router, via the use router instance, inspecting router path name and router query to render the slug.

Configure catch-all segments in the pages router using ellipsis to match all subsequent URL segments, and make them optional with double brackets for the products route.

Explore catch all segments in Next.js, dynamic routes that match all URL segments with the ellipsis, and how to optionally enable them with double square brackets.

Explore how Next.js caching in production causes static pages to render from build-time cache, leading to unexpected behavior when data changes.

Learn to implement a global interface that renders across routes using the document.js file in the pages router, and create a header component with links to home, /products, and /products/apple.

Replace anchor tags in the header with the link component to enable a single page application in Next.js, using app.js as a global wrapper to prevent page reloads.

Learn to connect a Next.js app to a SQLite database using Prisma, install Prisma, and set up Prisma with SQLite for the existing products page.

Explore Prisma, an open source orm that enables type-safe data queries in JavaScript or TypeScript, with Prisma client, Prisma migrate, and Prisma Studio for database management.

Set up prisma with SQLite, define a products model in schema.prisma, and run migrate dev to create migrations and generate prisma client for database access.

Create and configure a Prisma client to connect to the database and perform CRUD operations, exporting a db instance in a dedicated db folder for use across the project.

Insert data into a Prisma-connected database using the create method (and create many for bulk inserts) via server actions to add records with name, price, and image.

Explore inserting multiple records with the createMany method, using db.table.createMany and a data array, while comparing it to the single-record create method and observing records added to the products table.

Learn to delete records with prisma using delete and deleteMany, crafting where clauses with operators like gt, lt, starts with, ends with, and contains to remove single or multiple records.

Learn to fetch product data with Prisma by using find many, find first, find unique, and their throw variants, render products from a connected database, and handle not found errors.

Learn to update product records with Prisma in a Next.js ecommerce project, using update and update many, where id and data are provided, plus parsing price to float.

Discover how the upsert method combines insert and update to add or modify records using a where clause, update fields, and a create clause for new rows.

Build a complete e-commerce app with Next.js, SQLite, Prisma, Tailwind, Jose and JWT, bcrypt js, Stripe, and Vercel ci cd, covering admin and client sections.

Create two separate Next.js projects for admin and client in an ecommerce app, then set up the admin with Tailwind, app router, and a basic admin page.

Create a reusable sidebar component in the src components folder and integrate it in a layout that wraps routes, using a grid with sidebar and content areas.

Style and finish the sidebar by mapping a menu array to li items with Link components for single page routing, and show the logged-in user John Doe with an avatar.

Learn to integrate custom CSS with Tailwind by moving styles to the components layer using add layer and add apply directives, enabling modifiers and efficient tree shaking.

Learn how Tailwind's add layer directive assigns custom styles to base, components, and utilities. The apply directive injects utility classes into custom CSS selectors.

Style the sidebar container, title, ul, list items, and bottom user card using tailwind classes and custom add layer rules. Create responsive hover effects and a clean layout.

Add icons to the sidebar by creating an icons component and importing hero icons for home, users, swatch, and shopping bag, then render them with flex and spacing.

Create a users page in NextJS by scaffolding the root, adding a page component with a title and an add user link, and building a styled table for existing records.

Create the add users page in a Next.js project, implementing a responsive form with username, user type dropdown, password fields, and a submit button, with reusable components concept introduced.

Master the component-based architecture by turning inputs and labels into reusable UI components, using props like className and required, with conditional asterisk and tailwind merge utilities.

Create reusable button and input components in a NextJS e-commerce project, wiring dynamic props, onClick handlers, and class name utilities for a clean, component-based UI.

Refactor the codebase by moving UI into a screens structure, turning pages into dedicated screen components, and keeping root files minimal to improve maintainability and prepare for database integration.

Install prisma, initialize sqlite, define an admin user model with id, user type, unique username, and password, then migrate, generate, and verify the admin user table.

Create a server action to insert users into the admin users table with the Prisma client, using form data and redirecting to the users page; hashing will be covered next.

Learn to hash passwords with bcrypt by generating a salt with a balanced number of rounds, then hash the password and store the hashed value in the database.

Learn why storing hashed passwords with salt in the database improves security and how to hash and verify using salt and algorithms like bcrypt or argon2.

Mastering NextJS covers validating user creation by checking for existing users with find unique, redirecting with an error message, and displaying it on the add user page using search params.

Render users in a Next.js app by fetching data from db.admin.user.findMany via a server action, mapping users into a table, and providing edit and delete actions with icons.

Create the edit user page by adding an edit route at /users/edit/[user id], rendering a prefilled edit form using the selected user's data and reusing the add user interface.

Fetch the selected user's data via a server action and set dynamic defaults for the edit form's username and user type, renaming the password field to reset password.

Update user data by building a server action to edit user, hash password only when provided, update user by id, and redirect with revalidation after submitting the edit form.

Create a delete user server action and integrate it into the listing component to delete by id using db.admin.user.delete with where id equals user id, then revalidate the users page.

Create a custom delete confirmation modal in a Next.js project by building a reusable component, styling a centered popup with a backdrop and a close button.

Build and wire a delete confirmation popup triggered from the screen component with a centered delete icon. Add text and cancel/confirm buttons, manage the open state, and enable outside-click closing.

Trigger the delete user action from the confirmation popup by passing handle delete as handle confirm. Manage the selected id state and close the modal after deletion.

Create a product type module with a product type management page and a product types index, reusing the users table in a tabular layout and adding delete modal support.

Create an add product type page by scaffolding an add folder, exporting the add product types component, and wiring a form that uses search params while reusing add user UI.

Define product type and product models in the Prisma schema, linking them via a one-to-many relationship. Migrate database and verify fields like id, name, mrp, price, stock, sizes, and createdAt.

Learn to model a one-to-many relation with Prisma ORM using product type and products, where a product type can have zero or more products, and a product has one type.

Mastering NextJS + Interview Questions + E-commerce Project demonstrates adding product types with a server action, validating uniqueness, creating a database record, and revalidating and redirecting to product type page.

Create a server action using db.findMany to fetch product types, import it into the page, convert the component to async, fetch product types, and render them dynamically as props.

Create an edit product type page by reusing the add page UI, wiring the product type id route, and handling search params as props to resolve errors.

Fetch the product type by id with a server action and set its data as default values in the edit form, displaying the current name.

Update the product type via a server action, parsing form data and id, updating the database, and redirecting with revalidation to the product type page.

Implement a server action to delete a product type by id using db.delete, revalidate product type page, and connect it to the product type screen with an async delete handler.

Create the products page by building a client-side products component, reusing the users interface to render a tabular list with product type, MRP, selling price, current stock, status, and actions.

Create a responsive product listing UI using next image for images, grid and flex layouts, truncate long descriptions, and display product name, description, type, price, stock, and action buttons.

Create an add product page in NextJS by building add products component and wiring search params for errors, capturing product name and product type with kids and men's clothing options.

Create the add product form with MRP, selling price, image, and stock for small, medium, and large sizes, plus product status checkbox and description textarea.

Create a reusable switch component for a Next.js e-commerce project by wrapping the input in a label and styling the track and thumb with the after pseudo element.

Build a custom file input component in Next.js, integrate it into the add product form, and display the selected file name with a dynamic upload button and icon.

Fetch dynamic product types with a Get Product Types server action, convert the add product page to async, and render the types as map-produced select options using optional chaining.

Create a server action to insert products via form data and call db.create to add the record.

Implement server-side image storage by reading form data, converting to a buffer, ensuring a public uploads directory exists, saving images with a timestamped filename, and verifying the upload.

Complete the add product flow by converting stock with parse int, converting prices with parse float, creating the product via Prisma, and handling redirects, while fixing a sticky sidebar.

Render dynamic product data in a table using a server action and get products, then map products to rows with image, name, description, type, mrp, sell price, stock, and status.

Create an edit product page in Next.js by wiring dynamic routes and server action to fetch product types, reusing the add page UI to render and pass editing props.

Fetch the product by id and supply its data as default values in the edit form, including name, product type id, mrp, selling price, image, sizes, is active, and description.

Render default values for a switch and a file input by reading default data from props and displaying the extracted file name beside the choose file button.

Update product functionality with a server action that processes form data and product id, deletes the old image when updated, and uses db.update for persistence.

Explore how the Node.js process global object provides environment variables, process control, and event handling with process.on, and use existSync and unlinkSync to check file existence and remove files.

Create a server action to delete a product, remove its image, revalidate the /products page, and update the UI by closing the modal and clearing the selected product.

Begin the Next.js e-commerce client section by running npm run dev, updating the layout title to 'my store', replacing the home page with an h1, and applying styles in globals.css.

Create a reusable header component for all routes, wire it into the layout, and style a navbar with a search bar and hero icons for user and cart.

Add a search icon to the input, wrap it in a div, and create a custom input class with focus ring; update the header to place the icon inside.

Learn to join tailwind classes reliably by using the tailwind merge library with a custom CDN function that excludes undefined classes, applying it to search, user, and cart icons.

Learn to use Tailwind Merge with CLS to intelligently merge classes in React, remove duplicates and undefined values, and style icons by passing class names through props.

Add a profile dropdown with wish list and logout options, wired with next/link, stateful toggle on user icon click, and CSS styling to display menu items vertically with hover effects.

Learn how the useRef hook stores a value that persists across renders, exposes a current property, and lets you reference and manipulate DOM elements.

Add outside-click support to the profile dropdown. Use a dropdown ref, a click handler, and a useEffect to close the menu when the user clicks outside.

Use a cleanup function in the useEffect hook to remove event listeners and prevent memory leaks. Explain the difference between addEventListener and removeEventListener, and how useRef persists values across renders.

Create reusable input component in a next.js e-commerce project by exporting input.jsx that accepts type, placeholder, className, and rest props, using a CDN function, then integrate it in the header.

Create a home page component in a screens directory, export it, and render it in the page.jsx file, with two sections for filters and products listing and container-based spacing.

Create a filters section in a NextJS e-commerce project, implementing category filters and sorting by price, range, availability, and ratings, with a responsive, styled user interface.

Create a custom accordion component for each filter, add a chevron down icon, style the wrapper as an accordion button, and toggle open state using search params for filtering.

Explore how an accordion UI component condenses content with expandable items and how to use Next.js useRouter to update URL search params and reflect the accordion state.

Build a custom accordion component that toggles the chevron down icon, rotates 180 degrees, and animates height with 300ms ease-in-out transitions, passing title and type from the parent.

Extend the ecommerce filter UI in NextJS by adding accordions for sort by, price, rating, and availability, create option lists, and wire inputs and labels for independent toggles.

Create a dynamic price range slider for a Next.js e-commerce project using rc-slider, wiring min and max values to search params and displaying live price updates.

Create a reusable product card component in a Next.js project, render two cards per row, and display image, name, description, MRP, selling price, stock, ratings, and a product type label.

Wraps pricing and rating rows in product card, adds add to cart, buy now buttons with flex and gap, and styles them using custom btn and custom outline button classes.

Create a reusable button component in the UI folder, export default function Button, and replace product card buttons with it, passing type, onClick, className, children, and rest props.

Create an api route for product listing by fetching admin data and exposing /api/products in a Next.js app, with parallel client and admin operation on port 3001 and error handling.

Leverage server actions to fetch products from a base URL, pass data to the home screen, and render dynamic product cards with image URLs while configuring image domains for Next.js.

Fetch products from the admin section, render dynamic category types for the client filter, and implement a new API route to fetch product types.

Fetch product types from the API, convert to JSON, and map them to label and value, then render dynamic product type options in the category accordion.

Set and read filter values in the search params to apply product filters, using on change handlers for category, sort by rating, and in stock, while excluding all from params.

Modify the products api by building a dynamic where clause from query params to filter by product type, price range, rating, and stock, and sort by sell price.

Apply client-side filter by passing filter values as query params to the get products server action, building a query string from filtered params.

Implement a product search filter for admin and client by using search params, updating the query string, and rendering results while handling case-insensitive matching.

Create a dynamic product page route with a product id to display product details—image, name, type, ratings, price (MRP and selling price), and stock status via a grid card.

Add a size selection with radio inputs for S, M, and L; render product description and add to cart and buy now buttons; outline an API to fetch by id.

Create an api route to fetch a product by id, including product type, using a find unique query. Return 404 if not found and 500 on errors for admin panel.

Master dynamic product details in Next.js by fetching product by id via an API, converting the response to json, and rendering product data and image as props on details page.

Fetch and render only active products by filtering the isActive flag. Apply the same isActive filter for product details by id to return not found for inactive items.

Create a cart page with a cart route and component, linking the header icon to /cart; display an item-count badge and a grid for items and summary.

Enable size selection and quantity controls in the cart by wiring use product context to set items, update size, and implement increase and decrease functions for item quantities.

Implement remove from cart via the use product context, wire it to the remove button, and render items with stock-aware controls and dynamic final amounts and total.

Create the admin login page and its server action, implement authentication with Josie and JWT, and expose a client API for authenticating users.

Implement an authentication flow using Jose with JWT, leveraging JWS, JWE, JWK, and JWA to ensure the integrity, authenticity, and confidentiality of JSON data.

Set up an authentication flow with jose and jwt by generating a token using a 32-character secret key, configuring protected header, issued at, and expiration, then signing and verifying.

Create a server action to verify login credentials from the users table, generate a jwt token for the authenticated user, and prepare for storing the token in cookies.

Implement cookie-based authentication by storing the JWT token in an HTTP-only, secure cookie with sameSite and a path, then retrieve it for server-side auth and redirect to the admin dashboard.

Enhance cookie security by enabling HttpOnly to block client-side access, using the secure flag for https-only transmission, applying the SameSite attribute, and defining path and domain restrictions.

Implement middleware to protect private routes by validating a jwt token stored in cookies, redirecting unauthenticated users to login and authenticated users to the admin dashboard.

It reads the jwt token from cookies, verifies it and redirects to login on failure, then fetches the user data by id and renders the username in the sidebar.

Implement a secure logout flow with a server action that deletes the JWT token cookie and redirects to the login page, with a logout icon in the sidebar.

Verify the jwt token before every admin server action to ensure only authenticated users perform operations, applying the check across product actions, product type actions, and user actions.

Implement client-side authentication routes by building login and signup pages, organizing layouts to separate authenticated and unauthenticated views, and ensuring the login route renders without the header.

Create login and signup interfaces for the client app by reusing admin components, implementing a label, and wiring email-based authentication routes with login and sign up links.

Create a buyer master table in the database. Define id, name, email (unique), password, optional address and city, and created date time default now, via Prisma migrate dev.

Learn how to test a signup API with Postman, including creating collections and workspaces, sending a post request to localhost:3001/api/auth/signup, handling responses and tokens, and debugging duplicate user errors.

Create a login api in the admin section at /auth/login that validates customer data via email, checks password with bcrypt, issues a jwt on success, and returns appropriate error messages.

Test the customer login API with postman by sending a JSON body and receiving a token, while checking for user not found and invalid credentials errors.

Implement client-side signup by calling the admin API through a server action, posting form data to /api/auth/signup, storing the token in cookies, and redirecting to home with error handling.

Implement the client-side login by wiring a server action, calling the login API, and storing the customer JWT token in a cookie, with error handling and redirects.

Implement an API route to fetch a unique customer's data using a JWT token from cookies, verify the JWT, query the database, and respond with the customer data.

Integrate the fetch of the logged-in customer's data in the client section using server actions, manage cookies, and render the name in the profile dropdown while handling login flow.

Implement logout in the client section using a server action to delete the jwt token from cookies and redirect to the login page after logout, triggered from the header dropdown.