آموزش Next.js – طراحی فروشگاه آنلاین مشابه دیجی کالا با استفاده از Next.js #2

Next.js is a popular React framework that allows you to build fast and scalable web applications. In this tutorial, we will walk you through creating a project for a market place similar to Digikala, a popular e-commerce platform in Iran.

Step 1: Setting up the project
To get started, create a new Next.js project by running the following command in your terminal:

npx create-next-app digikala-marketplace

This will create a new Next.js project with all the necessary files and folders to get you started.

Step 2: Setting up the project structure
Next, let’s set up the project structure for our Digikala marketplace. Create a new folder named pages in the root directory of your project. Inside the pages folder, create the following files:

• index.js
• products.js
• product/[id].js
• cart.js

The index.js file will serve as the home page of our marketplace, displaying a list of all available products. The products.js file will display detailed information about a specific product, while the cart.js file will display the user’s shopping cart.

Step 3: Creating the home page
Open the index.js file and add the following code to display a list of products:

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to Digikala Marketplace</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <Link href={`/product/${product.id}`}>
              <a>{product.name}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;

In this code, we are using a dummy products array to display a list of products. You can replace this with data from an API or database later on.

Step 4: Creating the product detail page
Next, open the products.js file and add the following code to display detailed information about a specific product:

const ProductPage = ({ product }) => {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: {product.price}</p>
      <button>Add to cart</button>
    </div>
  );
};

export default ProductPage;

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: { product },
  };
}

In this code, we are using the getServerSideProps function to fetch data about the product with the specified id from an external API. You can replace the API URL with your own endpoint.

Step 5: Creating the shopping cart page
Finally, open the cart.js file and add the following code to display the user’s shopping cart:

const CartPage = () => {
  return (
    <div>
      <h1>Your Shopping Cart</h1>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            <p>{item.name}</p>
            <p>Quantity: {item.quantity}</p>
          </li>
        ))}
      </ul>
      <button>Checkout</button>
    </div>
  );
};

export default CartPage;

In this code, we are using a dummy cart array to display the products in the user’s shopping cart. You can replace this with data from local storage or a state management library like Redux.

Step 6: Testing the application
To test the application, run the following command in your terminal:

npm run dev

This will start the Next.js development server and open your browser to http://localhost:3000, where you can see your Digikala marketplace project in action.

In this tutorial, we have created a basic project structure for a marketplace similar to Digikala using Next.js. You can further customize and expand this project by adding features like user authentication, product search, and payment processing. Have fun building your e-commerce platform!

I hope you find this tutorial helpful. Let me know if you have any questions. Good luck with your project!