#Passing non-serializable objects (Date, etc) from server to client components
1 messages · Page 1 of 1 (latest)
I haven't done it myself and I'm not sure of your exact situation, but I can help with general tips I suppose
for date specifically I just convert it to string (.toISOString) then back to date with new Date(str)
but for everything non-serialisable you can check out some JSON.stringify extensions like https://github.com/Rich-Harris/devalue
yeah, you can just use the string conversion methods, you don't need superjson necessarily
I tried making an example on codesandbox, but it doesn't run a high enough version to support the newest app-directory features of next 13
but check the source out https://github.com/andrewpomeroy/next13-serialize-demo/tree/main/app
What you'll need to model is in the body of page.tsx and ClientComponent.tsx
You'll need to either mutate the dates inside each article to turn them into strings, or create a new articles with stringified dates
then in your <TableRow> you'll need to parse them back into Date objects, like here https://github.com/andrewpomeroy/next13-serialize-demo/blob/main/app/ClientComponent.tsx#L6
if you don't want to use superjson (you don't really need it), substitute the two methods with date.toISOString() and new Date(date) respectively