Integrate Speckle feature to modern web framework like NextJS

[phong.duong]

I am finding a way to integrate/setup Speckle in my web application using React/NextJS with Typescript, but the videos or documentation I found is quite limited or using different technology so I am quite hazy about what should I do and how I should do it.

The app should be able to:

1. Display a model viewer.
2. Data fetching using GraphQL client to query data. Process the fetched data and use it to populate your React components, display information alongside the 3D viewer.
3. Authentication to access private Speckle projects.

[Nikos (Nikos Argyros)]

Hey @phong.duong,

You need to adopt a bit the code to the React framework.

1. Use the Viewer API and create a React component, basic example here: IAAC_DFMA_Product_Library/components/Viewer.tsx at 4e008ce3ea043f3bed02ea77de0b4571559379ea · NikolaosArgy/IAAC_DFMA_Product_Library · GitHub

2. GQL clinet you can use Apollo, example here: speckle-demo-app-react/src/context/graphql.tsx at 04b8cf25b2f5be77820870008f415b4f681a4685 · AntoineDao/speckle-demo-app-react · GitHub

3. For authentication you will need go under Settings>Developers>Appilication and create a new secrete there. The Docs are not up to date unfortunately. Here is the same example in React:
   speckle-demo-app-react/src/context/auth.tsx at 04b8cf25b2f5be77820870008f415b4f681a4685 · AntoineDao/speckle-demo-app-react · GitHub