The admin panel provides a complete interface for managing products, categories, and tags. All admin routes are protected and require authentication.
Admin Routes
All admin routes are under /admin:
/admin– Dashboard/admin/products– Product management (list, add, edit, delete)/admin/products/add– Add new product/admin/products/edit/[slug]– Edit existing product/admin/categories– Category management/admin/categories/add– Add new category/admin/categories/edit/[slug]– Edit category/admin/tags– Tag management/admin/tags/add– Add new tag/admin/tags/edit/[slug]– Edit tag
Admin Layout
Admin pages use a sidebar layout with navigation:
import AdminSidebar from "@/components/AdminSidebar"; // Import Admin sidebar component
export default function AdminLayout({ children }) { // Admin layout to wrap pages and persist across navigation
return (
// Display flex container
// Display flex container with 100% width and padding 8
{children}
// Display children pages
); // Return wrapped pages
}Product Management
List Products
const response = await fetch("/api/admin/products?page=1&per_page=50"); // Get products with pagination
const { products, totalPages } = await response.json(); // Get products and total pages from responseCreate Product
await fetch("/api/admin/products", { // Create product with the given name, regular price and description
method: "POST",
body: JSON.stringify({
name: "Product", // Product name
regular_price: "29.99", // Product regular price
description: "Description" // Product description
})
}); // Create product with the given name, regular price and descriptionUpdate/Delete Product
// Update
await fetch(`/api/admin/products/${id}`, { // Update product with the given id and name
method: "PUT",
body: JSON.stringify({ name: "Updated" }) // Product name with the given name
});
// Delete
await fetch(`/api/admin/products/${id}`, { method: "DELETE" }); // Delete product with the given idCategory Management
// List
await fetch("/api/admin/categories"); // List categories
// Create
await fetch("/api/admin/categories", { // Create category with the given name and slug
method: "POST",
body: JSON.stringify({ name: "Category", slug: "category" }) // Category name and slug
});
// Update/Delete - same pattern as productsTag Management
// List, Create, Update, Delete
await fetch("/api/admin/tags"); // List tags
await fetch("/api/admin/tags", { method: "POST", body: JSON.stringify({ name: "Tag" }) }); // Create tag with the given name
await fetch(`/api/admin/tags/${id}`, { method: "PUT", body: JSON.stringify({ name: "Updated" }) }); // Update tag with the given id and name
await fetch(`/api/admin/tags/${id}`, { method: "DELETE" }); // Delete tag with the given idProduct Variations
// Get variations
await fetch(`/api/admin/products/${productId}/variations`); // Get variations with the given product id
// Create/Update/Delete
await fetch(`/api/admin/products/${productId}/variations`, { // Create variation with the given product id and attributes and regular price
method: "POST",
body: JSON.stringify({ attributes: [{ id: 1, option: "Red" }], regular_price: "29.99" })
});Image Upload & Search
// Upload image
const formData = new FormData(); // Create form data with the given file
formData.append("file", file); // Append file to form data
await fetch("/api/admin/upload", { method: "POST", body: formData }); // Upload image with the given form data
// Search
await fetch(`/api/admin/products?search=${term}`); // Search products with the given search termBest Practices
- Validate Input: Always validate form data before submission
- Show Confirmations: Ask for confirmation before destructive actions
- Handle Errors: Display clear error messages
- Optimize Images: Compress images before upload
- Use Pagination: Paginate large lists for better performance
- Auto-save: Save draft changes periodically
Next Steps: Learn about Components to build reusable admin UI components.