{"id":28357473,"url":"https://github.com/demark-pro/next-twa","last_synced_at":"2026-02-06T16:33:46.503Z","repository":{"id":258784660,"uuid":"875202789","full_name":"demark-pro/next-twa","owner":"demark-pro","description":"A simple and efficient npm package to integrate Telegram Web Apps into your Next.js applications","archived":false,"fork":false,"pushed_at":"2024-10-21T18:58:36.000Z","size":1102,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T05:13:36.535Z","etag":null,"topics":["nextjs","react","telegram","telegram-web-app"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/next-twa","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/demark-pro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-19T11:11:57.000Z","updated_at":"2025-08-30T22:42:58.000Z","dependencies_parsed_at":"2024-10-22T17:09:39.164Z","dependency_job_id":null,"html_url":"https://github.com/demark-pro/next-twa","commit_stats":null,"previous_names":["demark-pro/next-twa"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/demark-pro/next-twa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demark-pro%2Fnext-twa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demark-pro%2Fnext-twa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demark-pro%2Fnext-twa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demark-pro%2Fnext-twa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/demark-pro","download_url":"https://codeload.github.com/demark-pro/next-twa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demark-pro%2Fnext-twa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29168540,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T16:33:35.550Z","status":"ssl_error","status_checked_at":"2026-02-06T16:33:30.716Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["nextjs","react","telegram","telegram-web-app"],"created_at":"2025-05-28T08:05:46.628Z","updated_at":"2026-02-06T16:33:46.489Z","avatar_url":"https://github.com/demark-pro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Telegram WebApp for NextJS\n\nA simple and efficient npm package to integrate Telegram Web Apps into your Next.js applications. This package provides seamless access to Telegram's API, enabling you to create interactive web experiences directly inside Telegram.\n\n## Features:\n\n- Easy integration with Next.js\n- Access user data and chat information securely\n- Simplified API calls to Telegram\n\n## Live Demo\n\nTelegram Bot [@nexttwa_bot](https://t.me/nexttwa_bot/app) (in development)\n\n## Getting started\n\n### Installation\n\n```sh\nnpm i next-twa --save\n```\n\n### Usage\n\nImport `NextTWAProvider` from the library\n\n```js\nimport { NextTWAProvider } from 'next-twa';\n```\n\nThen wrap your code in the `NextTWAProvider` component to make it available to all components. `next-twa` will take care of the back button\n\n```js\n\u003cNextTWAProvider\u003e\n  \u003cApp /\u003e\n\u003c/NextTWAProvider\u003e\n```\n\nNow you can call `useNextTWA` in any component.\n\n```js\nimport { useNextTWA } from 'next-twa';\n\nexport const MyComponent = () =\u003e {\n  const { isReady, app, startAppValue } = useNextTWA();\n\n  return \u003cp\u003eHi, {app?.initDataUnsafe.user?.username}\u003c/p\u003e;\n};\n```\n\n### Hooks\n\n`useNextTWA(): UseNextTWAReturn` - Main hook for the app\n\n`useTelegramInitData(): WebAppInitData` - Hook to get the initial data from the Telegram Web Apps API already parsed.\n\n## Example\n\n```js\n'use client';\nimport {\n  NextTWAProvider,\n  useNextTWA,\n  OnStartAppHandler,\n  useTelegramInitData,\n} from 'next-twa';\n\nconst App = () =\u003e {\n  const { isReady, app, startAppValue } = useNextTWA();\n  const initData = useTelegramInitData();\n\n  if (!isReady) return \u003cp\u003eLoading...\u003c/p\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eStartAppValue: {startAppValue}\u003c/p\u003e\n      \u003cp\u003e\n        {initData \u0026\u0026\n          Object.entries(initData).map(([key, value]) =\u003e (\n            \u003cp key={key}\u003e\n              {key}: {JSON.stringify(value)}\n            \u003c/p\u003e\n          ))}\n      \u003c/p\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          app?.showAlert('Hi!');\n        }}\n      \u003e\n        Show Alert\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default function Home() {\n  const handleStartApp: OnStartAppHandler = startParam =\u003e {\n    if (startParam) {\n      // Do something: redirect or extract data from `start_param`\n      // The returned value will be written to `startAppValue`.\n\n      return { foo: 'bar' };\n    }\n\n    return 'string or anything';\n  };\n\n  return (\n    \u003cNextTWAProvider onStartApp={handleStartApp} useBackButton={true}\u003e\n      \u003cApp /\u003e\n    \u003c/NextTWAProvider\u003e\n  );\n}\n```\n\n## TODO\n\n- Add Docs\n- Add Tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemark-pro%2Fnext-twa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdemark-pro%2Fnext-twa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemark-pro%2Fnext-twa/lists"}