diff --git a/app/content/[slug]/page.tsx b/app/content/[slug]/page.tsx
index 993bd15ef..638d1a451 100644
--- a/app/content/[slug]/page.tsx
+++ b/app/content/[slug]/page.tsx
@@ -27,24 +27,26 @@ async function getContent(slug: string) {
]
}
};
- return allContent[slug] || null;
+ // Ensure slug is a string before using it as an index
+ return allContent[String(slug)] || null;
}
-// Define an interface for the page's props, including searchParams
+// Define an interface for the page's props, with params and searchParams as Promises
interface ContentPageProps {
- params: {
- slug: string;
- };
- searchParams: { [key: string]: string | string[] | undefined };
+ params: Promise<{ slug: string }>;
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function ContentPage({ params, searchParams }: ContentPageProps) {
- // searchParams is now destructured but not necessarily used if the page doesn't need it.
- // This is to satisfy the PageProps constraint.
- const content = await getContent(params.slug);
+ // Await the params promise to get its value
+ const resolvedParams = await params;
+ // Await searchParams if you need to use them, e.g.:
+ // const resolvedSearchParams = await searchParams;
+
+ const content = await getContent(resolvedParams.slug);
if (!content) {
- return
Content not found for {params.slug}
;
+ return Content not found for {resolvedParams.slug}
;
}
return (
@@ -57,7 +59,7 @@ export default async function ContentPage({ params, searchParams }: ContentPageP
);
}
-// Optional: Generate static paths if you have a known set of content pages
+// Optional: Generate static params still works the same way
// export async function generateStaticParams() {
// return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }];
// }
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 1c384a211..e42eb34a7 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -3,63 +3,31 @@
// Simulate fetching product data
async function getProduct(handle: string) {
const allProducts: { [key: string]: any } = { // Use 'any' for simplicity in this mock
- 'sample-product-1': {
- id: 'prod-1',
- name: 'Awesome T-Shirt',
- description: 'This is the best t-shirt ever. Made from 100% organic cotton.',
- price: { amount: '29.99', currencyCode: 'USD' },
- images: [
- { src: '/placeholder-tshirt-blue.jpg', alt: 'Awesome T-Shirt - Blue' },
- { src: '/placeholder-tshirt-red.jpg', alt: 'Awesome T-Shirt - Red' }
- ],
- variants: [
- { id: 'v1-color', name: 'Color', value: 'Blue' },
- { id: 'v1-size', name: 'Size', value: 'L' },
- { id: 'v1-material', name: 'Material', value: 'Cotton' }
- ]
- },
- 'sample-product-2': {
- id: 'prod-2',
- name: 'Cool Gadget Pro',
- description: 'The latest and greatest gadget with amazing features.',
- price: { amount: '199.50', currencyCode: 'USD' },
- images: [
- { src: '/placeholder-gadget-main.jpg', alt: 'Cool Gadget Pro' },
- { src: '/placeholder-gadget-angle.jpg', alt: 'Cool Gadget Pro - Angle View' }
- ],
- variants: [
- { id: 'v2-color', name: 'Color', value: 'Black' },
- { id: 'v2-storage', name: 'Storage', value: '256GB' }
- ]
- },
- 'another-item': {
- id: 'prod-3',
- name: 'Simple Mug',
- description: 'A simple mug for your daily coffee or tea.',
- price: { amount: '12.00', currencyCode: 'USD' },
- images: [
- { src: '/placeholder-mug.jpg', alt: 'Simple Mug' }
- ],
- variants: [
- { id: 'v3-color', name: 'Color', value: 'White' },
- { id: 'v3-size', name: 'Size', value: 'Standard' }
- ]
- }
+ 'sample-product-1': { id: 'prod-1', name: 'Awesome T-Shirt', description: 'This is the best t-shirt ever. Made from 100% organic cotton.', price: { amount: '29.99', currencyCode: 'USD' }, images: [ { src: '/placeholder-tshirt-blue.jpg', alt: 'Awesome T-Shirt - Blue' }, { src: '/placeholder-tshirt-red.jpg', alt: 'Awesome T-Shirt - Red' } ], variants: [ { id: 'v1-color', name: 'Color', value: 'Blue' }, { id: 'v1-size', name: 'Size', value: 'L' }, { id: 'v1-material', name: 'Material', value: 'Cotton' } ] },
+ 'sample-product-2': { id: 'prod-2', name: 'Cool Gadget Pro', description: 'The latest and greatest gadget with amazing features.', price: { amount: '199.50', currencyCode: 'USD' }, images: [ { src: '/placeholder-gadget-main.jpg', alt: 'Cool Gadget Pro' }, { src: '/placeholder-gadget-angle.jpg', alt: 'Cool Gadget Pro - Angle View' } ], variants: [ { id: 'v2-color', name: 'Color', value: 'Black' }, { id: 'v2-storage', name: 'Storage', value: '256GB' } ] },
+ 'another-item': { id: 'prod-3', name: 'Simple Mug', description: 'A simple mug for your daily coffee or tea.', price: { amount: '12.00', currencyCode: 'USD' }, images: [ { src: '/placeholder-mug.jpg', alt: 'Simple Mug' } ], variants: [ { id: 'v3-color', name: 'Color', value: 'White' }, { id: 'v3-size', name: 'Size', value: 'Standard' } ] }
};
- // Simulate network delay
- await new Promise(resolve => setTimeout(resolve, 50));
- return allProducts[handle] || null;
+ await new Promise(resolve => setTimeout(resolve, 50)); // Simulate network delay
+ return allProducts[String(handle)] || null; // Ensure handle is string
}
-export default async function ProductPage({ params }: { params: { handle: string } }) {
- const product = await getProduct(params.handle);
+interface ProductPageProps {
+ params: Promise<{ handle: string }>;
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function ProductPage({ params, searchParams }: ProductPageProps) {
+ const resolvedParams = await params;
+ // const resolvedSearchParams = await searchParams; // If needed
+
+ const product = await getProduct(resolvedParams.handle);
if (!product) {
- // In a real app, you might use Next.js's notFound() function here
- return Product not found for handle: {params.handle}
;
+ return Product not found for handle: {resolvedParams.handle}
;
}
return (
+ // ... (rest of the JSX should be the same, just ensure 'params.handle' is replaced with 'resolvedParams.handle' if it was used in the notFound message)
{product.name}
@@ -90,7 +58,6 @@ export default async function ProductPage({ params }: { params: { handle: string
No variants available for this product.
)}
- {/* Add to cart button can be a simple placeholder */}
;
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function CollectionPage({ params, searchParams }: CollectionPageProps) {
+ const resolvedParams = await params;
+ // const resolvedSearchParams = await searchParams; // Await if needed for filtering, etc.
+
+ const products = await getProductsByCollection(resolvedParams.collection);
+ const collectionName = resolvedParams.collection.charAt(0).toUpperCase() + resolvedParams.collection.slice(1);
return (