{"id":24087931,"url":"https://github.com/tinybirdco/next-tinybird","last_synced_at":"2025-05-05T21:41:02.543Z","repository":{"id":57166666,"uuid":"417060988","full_name":"tinybirdco/next-tinybird","owner":"tinybirdco","description":"Simple integration for Tinybird analytics and Next.js","archived":false,"fork":false,"pushed_at":"2021-10-28T10:09:07.000Z","size":235,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-02T15:08:33.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinybirdco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-14T09:04:36.000Z","updated_at":"2025-03-13T15:27:23.000Z","dependencies_parsed_at":"2022-08-30T15:10:09.302Z","dependency_job_id":null,"html_url":"https://github.com/tinybirdco/next-tinybird","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fnext-tinybird","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fnext-tinybird/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fnext-tinybird/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fnext-tinybird/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinybirdco","download_url":"https://codeload.github.com/tinybirdco/next-tinybird/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252581811,"owners_count":21771572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-10T03:56:15.062Z","updated_at":"2025-05-05T21:41:02.492Z","avatar_url":"https://github.com/tinybirdco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next-Tinybird\n\nNext-Tinybird makes easy to send analytics events to Tinybird in a Next.js application. Internally, it's a wrapper of [Tinybird tracker](https://github.com/tinybirdco/tinybird-tracker)\n\nNext-Tinybird helps you record events happening in your Next.js application and stores them in a Data Source within your Tinybird account. You can then explore this data in Real-time through Tinybird's SQL pipes and endpoints.\n\nIt offers a Provider to configure the Tinybird tracker script and a hook for sending the events.\n\n## What's Tinybird?\n\n[Tinybird](https://www.tinybird.co/) helps developers and data teams build Realtime Data Products at any scale. They are helping companies of all sizes ingest millions of rows per second and to power their analytical applications via low-latency, high-concurrency SQL based APIs that developers can build and publish in minutes.\n\n## Getting started\n\n### Prerequisite - Creating the Data Source\n\nBefore sending any event to Tinybird, you will need a [Data Source](https://docs.tinybird.co/main-concepts.html#data-sources) to store those events.\n\nPlease, refer to the [Prerequisite - Creating the Data Source section of the Tinybird-tracker README.](https://github.com/tinybirdco/tinybird-tracker#prerequisite---creating-the-data-source) There you will find all the steps that you need to take before sending events to Tinybird.\n\n## Usage\n\nAfter following the [prerequisite guide](https://github.com/tinybirdco/tinybird-tracker#prerequisite---creating-the-data-source), you will end up with an append token and a datasource. Let's start sending events.\n\n### Setting environment variables\n\nYou will need two mandatory environment variables:\n- NEXT_PUBLIC_TINYBIRD_TOKEN: with the token generated above, the one for appending data to the events Data Source. \n- NEXT_PUBLIC_TINYBIRD_DATASOURCE: with the name of the events Data Source\n\nThere are also two optional variables that you probably won't need to change from their default values:\n- NEXT_PUBLIC_TINYBIRD_API: to select the API server to call to. Needed if you are in a different cluster from the default EU one.\n- NEXT_PUBLIC_TINYBIRD_TRACKER_URL: in case you want to include a different URL for the Tinybird-track script. \n\nMore info about env variables in Next.js at [their docs.](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser)\n\n\n### Adding the Provider\n\nYou need to add the Tinybird Provider to include the tracker script that will make the actual calls.\n\n```\n// _app.tsx // _app.js\n\nimport TinybirdProvider from '@tinybirdco/next-tinybird'\n\n  return (\n    \u003cTinybirdProvider \n      dataSource={process.env.NEXT_PUBLIC_TINYBIRD_DATASOURCE}\n      token={process.env.NEXT_PUBLIC_TINYBIRD_TOKEN}\n    \u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/TinybirdProvider\u003e\n  )\n```\n\n**`TinybirdProvider` props**\n\n| Name | Description |\n|-|-|\n| dataSource | Name of the Data Source to send the events to |\n| token | Access token to append data to the Data Source |\n| apUrl | (Optional) API URL\n| trackerURL | (Optional) URL of the Tinybird-tracker script |\n\n\n### useTinybird hook\n\nUse our hook to send events to your Data Source.\n\n```\nimport { useTinybird } from '@tinybirdco/next-tinybird'\n\nexport default function BuyButton() {\n  const tinybird = useTinybird()\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e tinybird('click',\n        {\n          id: 'buy-button',\n          userEmail: 'johndoe@doe.com',\n          section: 'shopping cart'\n        })}\n      /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Checking that everything works\n\nIf you go to the Tinybird UI you will see the events in the Data Source modal.\n\n![populated datasource](https://user-images.githubusercontent.com/1078228/138273316-9dd46c52-9beb-4e37-84b8-82f9ab219f3d.png)\n\nNow, your imagination is the limit! Read [our guides to know how to consume this data creating endpoints](https://docs.tinybird.co/api-reference/query-api.html) and integrating them in your apps, dashboards, you name it!\n\n## Kudos\n\nNext-Tinybird is inspired by [Next-Plausible](https://github.com/4lejandrito/next-plausible/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinybirdco%2Fnext-tinybird","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinybirdco%2Fnext-tinybird","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinybirdco%2Fnext-tinybird/lists"}