You can also watch the YouTube video: [Next JS Tutorial #6 | Ecommerce App - Admin Create Product Page & API Route ](https://www.youtube.com/watch?v=QVjqB9QemqQ) We want to make every page admin only in the `app/auth/admin` folder so we'll move our is admin check from `auth/admin/page.js` to `auth/admin/layout.js` Instead of checking the user is admin or not in every page we'll make every page admin protected this way. Edit `page.js` in `app/auth/admin` folder: ```js "use client"; import AreaChartComponent from "@/components/Admin/AreaChartComponent"; import BarChartComponent from "@/components/Admin/BarChartComponent"; import PieChartComponent from "@/components/Admin/PieChartComponent"; const AdminPage = () => { return (

Dashboard

); }; export default AdminPage; ``` Create `layout.js` in `app/auth/admin` folder: ```js "use client"; import { useCurrentUser } from "@/contexts/CurrentUserContext"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; export default function AdminLayout({ children }) { const { currentUser } = useCurrentUser(); const router = useRouter(); useEffect(() => { if (!currentUser || currentUser.role !== "ADMIN") { router.push("/"); } }, [currentUser]); return children; } ``` Create `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(); } } ``` Create `page.js` in `app/auth/admin/create-product` folder: ```js import CreateProduct from "@/components/Admin/CreateProduct"; export default function Home() { return ; } ``` Create `CreateProduct.jsx` in `components/Admin` folder: ```js "use client"; import { useState } from "react"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; import { Label } from "../ui/label"; const CreateProduct = () => { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [image, setImage] = useState(""); const [price, setPrice] = useState(""); const [errorMsg, setErrorMsg] = useState(""); const handleSubmit = async () => { try { const response = await fetch("/api/products", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title, description, price, image, }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { setErrorMsg(data.error); setTimeout(() => { setErrorMsg(""); }, 4000); } else { window.location.reload(); } return data; } catch (error) { console.error("There was a problem with the fetch operation:", error); } }; return (

Create Product

{errorMsg ? (

Error: {errorMsg}

) : undefined}

Title setTitle(event.target.value)} className="input" placeholder="Title" required />

Description setDescription(event.target.value)} className="input" placeholder="Description" required />

Price setPrice(event.target.value)} className="input" placeholder="Price" required />

Image setImage(event.target.value)} className="input" placeholder="Image" required />

); }; export default CreateProduct; ``` That's it for this tutorial, we created functionality for create product and made a admin only protection creating a admin layout page. Next tutorial we'll listing products in our home page and make api route for it.