{"id":18317477,"url":"https://github.com/telegram-mini-apps/nextjs-template","last_synced_at":"2025-05-16T11:03:54.330Z","repository":{"id":205540257,"uuid":"714466820","full_name":"Telegram-Mini-Apps/nextjs-template","owner":"Telegram-Mini-Apps","description":"Telegram Mini Apps application template using Nex.jst, TypeScript, TON Connect and tma.js.","archived":false,"fork":false,"pushed_at":"2025-05-06T12:19:08.000Z","size":289,"stargazers_count":281,"open_issues_count":0,"forks_count":97,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-06T13:30:15.113Z","etag":null,"topics":["nextjs","typescript"],"latest_commit_sha":null,"homepage":"","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/Telegram-Mini-Apps.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-04T23:35:30.000Z","updated_at":"2025-05-06T12:19:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4c5c75c-8484-4743-9675-5fe6e25806fe","html_url":"https://github.com/Telegram-Mini-Apps/nextjs-template","commit_stats":null,"previous_names":["telegram-mini-apps/nextjs-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Fnextjs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Fnextjs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Fnextjs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Fnextjs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Telegram-Mini-Apps","download_url":"https://codeload.github.com/Telegram-Mini-Apps/nextjs-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"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":["nextjs","typescript"],"created_at":"2024-11-05T18:06:15.245Z","updated_at":"2025-05-16T11:03:54.312Z","avatar_url":"https://github.com/Telegram-Mini-Apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Telegram Mini Apps Next.js Template\n\nThis template demonstrates how developers can implement a web application on the\nTelegram Mini Apps platform using the following technologies and libraries:\n\n- [Next.js](https://nextjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)\n- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk/2-x)\n- [Telegram UI](https://github.com/Telegram-Mini-Apps/TelegramUI)\n\n\u003e The template was created using [pnpm](https://pnpm.io/). Therefore, it is\n\u003e required to use it for this project as well. Using other package managers, you\n\u003e will receive a corresponding error.\n\n## Install Dependencies\n\nIf you have just cloned this template, you should install the project\ndependencies using the command:\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\n  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\n  the required\n  standards.\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)\non how to do 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\nprocess.\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\n`@telegram-apps/sdk`, are not intended for use outside of Telegram.\n\nNevertheless, they appear to function properly. This is because the\n`src/hooks/useTelegramMock.ts` file, which is imported in the application's\n`Root` component, employs the `mockTelegramEnv` function to simulate the\nTelegram environment. This trick convinces the application that it is\nrunning in a Telegram-based environment. Therefore, be cautious not to use this\nfunction in production 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\nrecommended to develop it within Telegram for the most accurate representation\nof its real-world functionality.\n\nTo run the application inside Telegram, [@BotFather](https://t.me/botfather)\nrequires an HTTPS link.\n\nThis template already provides a solution.\n\nTo retrieve a link with the HTTPS protocol, consider using the `dev:https`\nscript:\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\nsecure. Click the `Proceed to localhost (unsafe)` button to continue and view\nthe application.\n\nOnce the application is displayed correctly, submit the\nlink `https://127.0.0.1:3000` (`https://localhost:3000` is considered as invalid\nby BotFather) as the Mini App link to [@BotFather](https://t.me/botfather).\nThen, navigate to [https://web.telegram.org/k/](https://web.telegram.org/k/),\nfind your bot, and launch the Telegram Mini App. This approach provides the full\ndevelopment experience.\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\nthe [Next.js deployment documentation](https://nextjs.org/docs/deployment) for\nmore details.\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/telegram-apps-sdk-react)\n- [Telegram developers community chat](https://t.me/devs)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelegram-mini-apps%2Fnextjs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftelegram-mini-apps%2Fnextjs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelegram-mini-apps%2Fnextjs-template/lists"}