The repository contains demo of GoodData with Next.js. The result is visualization from GoodData rendered in Next.js environment.
If you have any questions, feel free to ask me on GoodData slack (@Patrik Braborec). Also, for more information you can check GoodData UI SDK.
The following packages deal with GoodData backend:
npm i @gooddata/api-client-tiger @gooddata/sdk-backend-tiger
The following package contains all components of GoodData UI SDK:
npm i @gooddata/sdk-ui-all
Tip: If you do not need to install all components, you can select only those you need. More info is in the documentation.
The following package will help you generate a file with code representation of all available metrics and attributes in your GoodData Cloud:
npm i -D @gooddata/catalog-export
You need to modify package.json
, and add the following properties:
"gooddata": {
"hostname": "<your-gooddata-host>",
"workspaceId": "<your-workspace-id>",
"catalogOutput": "app/gooddata-export.ts",
"backend": "tiger"
}
The configuration is for the catalog-export
tool that exports all available metrics and attributes to a single file that you can reference in your code.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"refresh-md": "gdc-catalog-export" <-- this is the new script you need to add!
},
export TIGER_API_TOKEN=<your-api-token>
Note: more info on how to get API token is in the documentation.
If your Next.js application runs on different domain that GoodData (which is the most probable scenario), you need to configure CORS. Basically, you need to go to /settings and add Cross-origin resource sharing (CORS). If your Next.js application runs on domain https://super-cool-app.com, you need to add https://super-cool-app.com to CORS. You can find more information in the documentation.
npm run refresh-md
The succesful result is: The result generated from workspace with id is located at /app/gooddata-export.ts.
Add GoodData styles to layout.tsx
:
import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
The following code snippet contains example of simple GoodData visualization. You can find the whole component in app/page.tsx.
const measures = [ReturnUnitCost.Sum];
const attributes = [DateDatasets.CustomerCreatedDate.CustomerCreatedDateQuarterOfYear.Default];
return (
<BackendProvider backend={backend}>
<WorkspaceProvider workspace="<your-workspace-id>">
<div className="w-full h-full flex flex-col items-center">
<h1 className="my-10 text-2xl underline">GoodData with Next.js</h1>
<div className="w-1/2 h-1/2">
<BarChart
measures={measures}
viewBy={attributes}
/>
</div>
</div>
</WorkspaceProvider>
</BackendProvider>
Now you can run your Next.js application with GoodData visualization.
If you want to run this demo, please make sure you configured everything correctly (regarding to GoodData) as is desribed in the chapter above.
Install all dependencies (you can skip that, if you already installed your dependencies):
npm install
Run development server:
npm run dev
The following screenshot shows how this demo looks like: