Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koval01/nextjs-tma-template
Example of Telegram Mini App developed with NextJS
https://github.com/koval01/nextjs-tma-template
javascript miniapp nextjs react tailwindcss telegram typescript vk
Last synced: about 1 month ago
JSON representation
Example of Telegram Mini App developed with NextJS
- Host: GitHub
- URL: https://github.com/koval01/nextjs-tma-template
- Owner: koval01
- License: gpl-3.0
- Created: 2024-08-14T09:43:56.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T01:11:11.000Z (about 2 months ago)
- Last Synced: 2024-09-26T21:42:28.121Z (about 1 month ago)
- Topics: javascript, miniapp, nextjs, react, tailwindcss, telegram, typescript, vk
- Language: TypeScript
- Homepage: https://t.me/tma_next_bot/app
- Size: 1.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Telegram Mini App Next.js Template
This template demonstrates how developers can implement a web application on the Telegram
Mini Apps platform using the following technologies and libraries:
- [Next.js](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [@tma.js SDK](https://docs.telegram-mini-apps.com/packages/tma-js-sdk)
- [VK UI](https://vkcom.github.io/VKUI)
> The template was created using [pnpm](https://pnpm.io/). Therefore, it is required to use
> it for this project as well. Using other package managers, you will receive a corresponding error.
## Install Dependencies
If you have just cloned this template, you should install the project dependencies using the
command:
```Bash
pnpm install
```
## Scripts
This project contains the following scripts:
- `dev`. Runs the application in development mode.
- `dev:https`. Runs the application in development mode using self-signed SSL certificate.
- `build`. Builds the application for production.
- `start`. Starts the Next.js server in production mode.
- `lint`. Runs [eslint](https://eslint.org/) to ensure the code quality meets the required
standards.
- `deploy`. Starting the build of the project, and in the case of a successful build,
all commits will be pushed to the origin repository
To run a script, use the `pnpm run` command:
```Bash
pnpm run {script}
# Example: pnpm run build
```
## Create Bot and Mini App
Before you start, make sure you have already created a Telegram Bot. Here is
a [comprehensive guide](https://docs.telegram-mini-apps.com/platform/creating-new-app) on how to
do it.
## Run
Although Mini Apps are designed to be opened
within [Telegram applications](https://docs.telegram-mini-apps.com/platform/about#supported-applications),
you can still develop and test them outside of Telegram during the development process.
To run the application in the development mode, use the `dev` script:
```bash
pnpm run dev
```
After this, you will see a similar message in your terminal:
```bash
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9s
```
To view the application, you need to open the `Local`
link (`http://localhost:3000` in this example) in your browser.
It is important to note that some libraries in this template, such as `@tma.js/sdk`, are not
intended for use outside of Telegram.
Nevertheless, they appear to function properly. This is because the `src/hooks/useTelegramMock.ts`
file, which is imported in the application's `Root` component, employs the `mockTelegramEnv`
function to simulate the Telegram environment. This trick convinces the application that it is
running in a Telegram-based environment. Therefore, be cautious not to use this function in
production mode unless you fully understand its implications.
### Run Inside Telegram
Although it is possible to run the application outside of Telegram, it is recommended to develop it
within Telegram for the most accurate representation of its real-world functionality.
To run the application inside Telegram, [@BotFather](https://t.me/botfather) requires an HTTPS link.
This template already provides a solution.
To retrieve a link with the HTTPS protocol, consider using the `dev:https` script:
```bash
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s
```
Visiting the `Local` link (`https://localhost:3000` in this example) in your
browser, you will see the following warning:
This browser warning is normal and can be safely ignored as long as the site is secure. Click
the `Proceed to localhost (unsafe)` button to continue and view the application.
Once the application is displayed correctly, submit this link as the Mini App link
to [@BotFather](https://t.me/botfather). Then, navigate
to [https://web.telegram.org/k/](https://web.telegram.org/k/), find your bot, and launch the
Telegram Mini App. This approach provides the full development experience.
## Deploy
The easiest way to deploy your Next.js app is to use
the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
from the creators of Next.js.
Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
details.
## Useful Links
- [Platform documentation](https://docs.telegram-mini-apps.com/)
- [@telegram-apps/sdk-react documentation](https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react)
- [Telegram developers community chat](https://t.me/devs)