GoodData with Next.js

Next.js is a popular framework for building web applications. If you've built a web application using Next.js, the following text will show you how to integrate GoodData into it.

Step 1: Install all necessary dependencies

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

Step 2: Extend package.json

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.

Step 3: Add a new script to package.json

"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!
}

Step 4: Add API token

export TIGER_API_TOKEN=<your-api-token>

Note: more info on how to get API token is in the documentation.

Step 5: Configure CORS in GoodData

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.

Step 6: Run catalog-export tool to export metrics and attributes

npm run refresh-md

The succesful result is: The result generated from workspace with id is located at /app/gooddata-export.ts.

Step 7: Add styles

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";

Step 8: Build your visualization

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.

Resources

You can find the whole repository on GitHub. If you have any questions, feel free to ask us in GoodData slack. Also, for more information you can check GoodData UI SDK.