{"id":15107857,"url":"https://github.com/koval01/nextjs-tma-template","last_synced_at":"2025-06-27T05:33:41.653Z","repository":{"id":253084099,"uuid":"842409784","full_name":"koval01/nextjs-tma-template","owner":"koval01","description":"Example of Telegram Mini App developed with NextJS","archived":false,"fork":false,"pushed_at":"2025-06-18T14:59:23.000Z","size":474,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T15:44:45.283Z","etag":null,"topics":["javascript","miniapp","nextjs","react","tailwindcss","telegram","typescript","vk"],"latest_commit_sha":null,"homepage":"https://t.me/tma_next_bot/app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koval01.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null}},"created_at":"2024-08-14T09:43:56.000Z","updated_at":"2025-06-18T14:57:25.000Z","dependencies_parsed_at":"2025-02-08T06:31:08.575Z","dependency_job_id":"cde4cd28-41cd-4e64-8fc6-7a1de22baece","html_url":"https://github.com/koval01/nextjs-tma-template","commit_stats":{"total_commits":31,"total_committers":3,"mean_commits":"10.333333333333334","dds":"0.32258064516129037","last_synced_commit":"9f13cfe07ae68e78faece02aaf1ec2d760671062"},"previous_names":["koval01/nextjs-tma-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/koval01/nextjs-tma-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koval01%2Fnextjs-tma-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koval01%2Fnextjs-tma-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koval01%2Fnextjs-tma-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koval01%2Fnextjs-tma-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koval01","download_url":"https://codeload.github.com/koval01/nextjs-tma-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koval01%2Fnextjs-tma-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262198628,"owners_count":23273881,"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":["javascript","miniapp","nextjs","react","tailwindcss","telegram","typescript","vk"],"created_at":"2024-09-25T21:42:02.963Z","updated_at":"2025-06-27T05:33:41.614Z","avatar_url":"https://github.com/koval01.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Telegram Mini App Next.js Template\n\nThis template demonstrates how developers can implement a web application on the Telegram\nMini Apps platform using the following technologies and libraries:\n\n- [Next.js](https://nextjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [@tma.js SDK](https://docs.telegram-mini-apps.com/packages/tma-js-sdk)\n- [VK UI](https://vkcom.github.io/VKUI)\n\n\u003e The template was created using [pnpm](https://pnpm.io/). Therefore, it is required to use\n\u003e it for this project as well. Using other package managers, you will receive a corresponding error.\n\n## Install Dependencies\n\nIf you have just cloned this template, you should install the project dependencies using the\ncommand:\n\n```Bash\npnpm install\n```\n\n## Scripts\n\nThis project contains the following scripts:\n\n- `dev`. Runs the application in development mode.\n- `dev:https`. Runs the application in development mode using self-signed SSL certificate.\n- `build`. Builds the application for production.\n- `start`. Starts the Next.js server in production mode.\n- `lint`. Runs [eslint](https://eslint.org/) to ensure the code quality meets the required\n  standards.\n- `deploy`. Starting the build of the project, and in the case of a successful build, \n  all commits will be pushed to the origin repository\n\nTo run a script, use the `pnpm run` command:\n\n```Bash\npnpm run {script}\n# Example: pnpm run build\n```\n\n## Create Bot and Mini App\n\nBefore you start, make sure you have already created a Telegram Bot. Here is\na [comprehensive guide](https://docs.telegram-mini-apps.com/platform/creating-new-app) on how to\ndo it.\n\n## Run\n\nAlthough Mini Apps are designed to be opened\nwithin [Telegram applications](https://docs.telegram-mini-apps.com/platform/about#supported-applications),\nyou can still develop and test them outside of Telegram during the development process.\n\nTo run the application in the development mode, use the `dev` script:\n\n```bash\npnpm run dev\n```\n\nAfter this, you will see a similar message in your terminal:\n\n```bash\n▲ Next.js 14.2.3\n- Local:        http://localhost:3000\n\n✓ Starting...\n✓ Ready in 2.9s\n```\n\nTo view the application, you need to open the `Local`\nlink (`http://localhost:3000` in this example) in your browser.\n\nIt is important to note that some libraries in this template, such as `@tma.js/sdk`, are not\nintended for use outside of Telegram.\n\nNevertheless, they appear to function properly. This is because the `src/hooks/useTelegramMock.ts`\nfile, which is imported in the application's `Root` component, employs the `mockTelegramEnv`\nfunction to simulate the Telegram environment. This trick convinces the application that it is\nrunning in a Telegram-based environment. Therefore, be cautious not to use this function in\nproduction mode unless you fully understand its implications.\n\n### Run Inside Telegram\n\nAlthough it is possible to run the application outside of Telegram, it is recommended to develop it\nwithin Telegram for the most accurate representation of its real-world functionality.\n\nTo run the application inside Telegram, [@BotFather](https://t.me/botfather) requires an HTTPS link.\n\nThis template already provides a solution.\n\nTo retrieve a link with the HTTPS protocol, consider using the `dev:https` script:\n\n```bash\n$ pnpm run dev:https\n\n▲ Next.js 14.2.3\n- Local:        https://localhost:3000\n\n✓ Starting...\n✓ Ready in 2.4s\n```\n\nVisiting the `Local` link (`https://localhost:3000` in this example) in your\nbrowser, you will see the following warning:\n\n![SSL Warning](assets/ssl-warning.png)\n\nThis browser warning is normal and can be safely ignored as long as the site is secure. Click\nthe `Proceed to localhost (unsafe)` button to continue and view the application.\n\nOnce the application is displayed correctly, submit this link as the Mini App link\nto [@BotFather](https://t.me/botfather). Then, navigate\nto [https://web.telegram.org/k/](https://web.telegram.org/k/), find your bot, and launch the\nTelegram Mini App. This approach provides the full development experience.\n\n\n## Deploy\n\nThe easiest way to deploy your Next.js app is to use\nthe [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme)\nfrom the creators of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more\ndetails.\n\n## Useful Links\n\n- [Platform documentation](https://docs.telegram-mini-apps.com/)\n- [@telegram-apps/sdk-react documentation](https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react)\n- [Telegram developers community chat](https://t.me/devs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoval01%2Fnextjs-tma-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoval01%2Fnextjs-tma-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoval01%2Fnextjs-tma-template/lists"}