You can also watch the YouTube video: [Next JS Tutorial #7 | Ecommerce App - Listing Products & API Route](https://www.youtube.com/watch?v=yLnfuzgSE3s) Edit `next.config.mjs` file: ```js /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "fakestoreapi.com", }, ], }, }; export default nextConfig; ``` Edit `route.js` in `app/api/products` folder: ```js import { NextResponse } from "next/server"; import { PrismaClient } from "@prisma/client"; import { cookies } from "next/headers"; import jwt from "jsonwebtoken"; const prisma = new PrismaClient(); export async function POST(request) { const body = await request.json(); const { title, description, price, image } = body; if (!title || !description || !price || !image) { return NextResponse.json( { error: "You must fill all the required fields!" }, { status: 200 } ); } try { const tokenCookie = await cookies(); const getToken = tokenCookie.get("token"); if (getToken) { const token = jwt.verify(getToken.value, "appSecret"); const userId = token.id; if (!userId) { return NextResponse.json( { error: "Unauthorized request!" }, { status: 200 } ); } const user = await prisma.user.findUnique({ where: { id: userId } }); if (!user) { return NextResponse.json( { error: "Unauthorized request!" }, { status: 200 } ); } if (user.role !== "ADMIN") { return NextResponse.json( { error: "Unauthorized request!" }, { status: 200 } ); } const product = await prisma.product.create({ data: { title, description, image, price: parseFloat(price), }, }); return NextResponse.json(product, { status: 201 }); } return NextResponse.json( { error: "Unauthorized request!" }, { status: 200 } ); } catch (error) { console.log(error.message); return NextResponse.json( { error: "Failed to create post" }, { status: 500 } ); } finally { await prisma.$disconnect(); } } export async function GET() { try { const products = await prisma.product.findMany({ orderBy: { createdAt: "desc" }, }); return NextResponse.json({ products }); } catch (error) { return NextResponse.json( { error: "Failed to get products" }, { status: 500 } ); } finally { await prisma.$disconnect(); } } ``` Edit `page.js` in `app` folder: ```js import Products from "@/components/Products"; export default function Home() { return (

); } ``` Create `Products.jsx` in `components` folder: ```js "use client"; import { useEffect, useState } from "react"; import ProductItem from "./ProductItem"; const Products = () => { const [products, setProducts] = useState([]); const getProducts = async () => { try { const response = await fetch("/api/products"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setProducts(data.products); return data; } catch (error) { console.error("There was a problem with the fetch operation:", error); } }; useEffect(() => { getProducts(); }, []); return (

{products.map((product) => { return ; })}

); }; export default Products; ``` Create `ProductItem.jsx` in `components` folder: ```js import Image from "next/image"; import Link from "next/link"; import { FaRegBookmark } from "react-icons/fa"; import { HiOutlineHeart } from "react-icons/hi"; import { Card, CardContent, CardFooter, CardHeader } from "./ui/card"; const ProductItem = ({ product }) => { const truncatedDescription = product.description.length > 160 ? `${product.description.substring(0, 160)}...` : product.description; const formattedDate = new Intl.DateTimeFormat("en-US", { month: "long", // Full month name day: "2-digit", // Two-digit day year: "numeric", // Full year }).format(new Date(product.createdAt)); return (

{formattedDate}

{product.title}

{truncatedDescription}

${product.price} USD

); }; export default ProductItem; ``` That's it for this tutorial, we created api route to get our products from our database and list them in our home page. Next tutorial, we'll create product detail page and api route for it.