Product Listing Page – Next.js

This project is a simple Product Listing Page built as part of a frontend assignment.

The main goal of this project is to demonstrate the use of Next.js with server-side rendering, clean component structure, and basic SEO practices.

What this project does

• Displays a list of products on a single page
• Fetches product data from a mock API (FakeStore API)
• Renders the page on the server before sending it to the browser
• Uses reusable UI components for better code structure
• Works on both desktop and mobile screens

Tech Stack Used

• Next.js (React framework)
• JavaScript
• HTML & CSS
• FakeStore API (mock data)
• GitHub for version control
• Netlify for deployment

How it works

When the page is opened, Next.js fetches product data from the FakeStore API on the server. The server then generates the HTML using reusable components and sends the fully rendered page to the browser. This improves performance and SEO.