[FEATURE] Move Survey Overview Page to Server Components

[mattinannt]

Over the last few months the future of Next.js & React got unveiled. At Formbricks we started using the app directory pretty early but at that point it wasn't clear how data-fetching and mutation should work in Server Components so we kept the client-side approach with APIs & SWR. But now we would like to make the switch to Next.js and React how Vercel imagines it to use the newest performance and DX optimizations Vercel introduces.

To have a better approach for data-fetching and type safety we are now moving to internal data services, e.g. a getSurveys() method to retrieve all the surveys of the current user. The Typescript type of a survey is standardised in a Zod Schema. That way we can also format data in a more convenient way in the app and keep this separated from the way we store in in a relational database. E.g. our Person object got a lot simpler to use that way because we don't need to think about the complex relational model that is used for storing.

You can find the new services in packages/lib/services and the Zod schemas in packages/types/v1

Please use this approach together with the information from Next.js on Server-Components to build a new Survey Overview page ( apps/web/app/environments/[environmentId]/surveys ). For data-fetching use our services in the Server-Components and build new Services if necessary. Use Client-Components only for the small parts where client-side functionality is really needed. For Data-Mutation use Server-Actions.

(We already recently moved the People Overview to Server Components, you can also check it out for reference)

TODO:

• Use our internal services for data fetching and data mutation (packages/lib/services) (create new services or zod schemas if necessary)
• Use Client Components only when needed and let Server Components be the default
• Use Server-Actions when data mutation is needed

See Next.js documentation for examples and explanations: https://nextjs.org/docs/getting-started/react-essentials

How we code at Formbricks 🤓

• Everything is type-safe
• All UI components are in the package formbricks/ui
• Run pnpm dev to find a demo app to test in-app surveys at localhost:3002
• We use chatGPT to help refactor code. Use our Formbricks ✨ megaprompt ✨ to create the right context before you write your prompt.

[Ankur-Datta-4]

I'd like to work on this issue @mattinannt . Also the services developed for Issue- #473 can be used. So shall I work on the branch which deals with that, on #488 ?

[mattinannt]

I'd like to work on this issue @mattinannt . Also the services developed for Issue- #473 can be used. So shall I work on the branch which deals with that, on #488 ?

I would like to keep them in separate PRs to make the review and merge process easier 😊 But you can copy the services/types from this PR into your feature code and we can see what we get merged first 😊