velvet steppe
I have an app that I cleaned up and mostly moved from client side to server side last night thanks to DirtyCajunRice!
Only issue is that on my builds I can't access query parameters, on development I can. I see this in my console logs:
at n (/Users/berkserbetcioglu/Code/storefront/.next/server/app/[...r]/page.js:1:2996)
at nM (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47419)
at nN (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64674)
at nI (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46806)
at nM (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47570)
at nM (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61663)
at nN (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64674)
at nB (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67657)
at nF (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66824)
at nN (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64990)```
I'm guessing that is the reason. Here is my page.tsx:
```ts
import React from 'react'
import ProductCards from './ProductCards';
import { ProductSearchParams } from '@/types/products';
interface Props {
searchParams: ProductSearchParams
}
export default function Home({ searchParams }: Props) {
console.log("searchParams", searchParams);
return (
<main>
<ProductCards {...searchParams} />
</main>
);
}```
types.tsx:
```ts
export const allSearchParams = ['r', 'search', 'genders', 'sizes', 'conditions', 'countries', 'brands', 'pages'] as const;
export type ProductSearchParam = typeof allSearchParams[number];
export type ProductSearchParams = Record<ProductSearchParam, string | string[]>;
export interface Product {
title: string;
brands: string[];
actions: string[];
status: string | null;
genders: string[];
sizes: string[];
categories: string[];
price: number | null;
currency: string | null;
countries: string[];
images: string[];
conditions: string[];
colors: string[];
shipping_info: string | null;
search_keywords: string | null;
timestamp: number; // in seconds
source: string;
reddit_subreddit: string;
reddit_author: string;
reddit_post_id: string | null;
reddit_thread_id?: string | null;
reddit_comment_id: string | null;
listing_number: number;
}```
First few lines of ProductCards.tsx
```ts
import React, { Suspense } from 'react'
import Link from 'next/link'
import SearchContainer from './SearchContainer';
import { CustomImage, DefaultImage } from './image';
import products from '@/json/listings.json'
import { allSearchParams, ProductSearchParam, ProductSearchParams, Product } from '@/types/products';
import { redirect } from 'next/navigation'
import { CheckBox } from './checkbox';
function sanitize(params: ProductSearchParams) {
const stringsOnly = Object.fromEntries(Object.entries(params).map(([k, v]) => [k, Array.isArray(v) ? v[0] : v]));
return {... stringsOnly, pages: Number(stringsOnly.pages)} as Record<Exclude<ProductSearchParam, 'pages'>, string> & { pages: number };
}
const ProductCards = (props: ProductSearchParams) => {
const initialParams = sanitize(props)
console.log("Initial Params:", initialParams)```
Can share anything else that helps!
grim cradle
elder jasper
woven ether
