Next.js Discord

Discord Forum

How to structure my nextjs14 Page.tsx : with chart, map and datagrid

Unanswered
syed posted this in #help-forum
Open in Discord
Hi - I was wondering whether anyone would have any advice on how to implement my page.tsx in a poc I am doing.

read this and started to implement it https://nextjs.org/learn/dashboard-app/adding-search-and-pagination :

page.tsx (server component)
-search.tsx (this is client component with a simple input box as search criteria)
-has button click that changes the URL (wierd to me but followed the nextjs docs to continue like this)

back to page.tsx
-MyDataTable.tsx (server component. this calls the SERVER ACTION and gets the data out and renders. query string params retrived from browser url)

This works in an odd way but even the docs warn abot this saying if you are used to React client side only, "URL way might sound strange but it is better".

Now I want to also load up my chart component. I cant tell how to pass the data from MyTableData.tsx to page.tsx and then to Appchart.tsx!

I thought this would be a simple case of

Load data in the page.tsx based on search.tsx param. Store the data[] returned.
Then pass this datap[] to any other component (server or client) and then it would work with that.

Any ideas for a general design guidance on how to structure the page?

0 Replies