Oops. Something went wrong.
);
}
```
5. Now, let's create a Telegram mini app provider and make sure it's a client component. You can customize options as per your needs ([docs](https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react)). Also, add those custom components we just created in the component:
```typescript src/components/tma/index.tsx
// src/components/tma/index.tsx
"use client";
import { PropsWithChildren } from "react";
import { DisplayGate, SDKProvider } from "@tma.js/sdk-react";
import { TmaProviderError } from "./tma-provider-error";
import { TmaProviderLoading } from "./tma-provider-loading";
import { TmaProviderInitialState } from "./tma-provider-initial-state";
export function TmaSDKProvider({ children }: PropsWithChildren) {
return (
{children}
);
}
```
6. Finally, add Tma SDK provider to the root layout:
```typescript src/app/layout.tsx
// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { TmaSDKProvider } from "@/components/tma";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "My Telegram Mini App",
description: "A mini app for Telegram.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{/*This will Provide Telegram authenticated user */}
{children}
);
}
```
6. Start your app
```bash
pnpm dev
```
7. Now make your app publicly accessible:
You can use `ngrok`
```bash
ngrok http 3000
```
Next lets setup telegram bot.
# Telegram Bot
Now let's set up our Telegram bot.
For Telegram bot I'll use Nodejs with Typescript, Dotenv and Telegraph, if you are following this repo `cd` to bot or setup a separate project and install depencies:
```bash
pnpm i dotenv telegraf
```
## Steps (Bot)
1. First, obtain your Telegram bot tokens.
I'll use `BotFather` to create a bot in this demo.
- Open Telegram on your device, search for `BotFather` in the search bar.
- Then send the `/newbot`` command to Telegram.
- Choose a suitable name and username, then copy the token.
2. Go to `bot/src` and create a `.env` file.
3. Fill in your bot token and `ngrok` public URL:
```bash
# bot/src/.env
NODE_ENV="development"
# Telegram Bot
TELE_BOT_TOKEN="" # Your Telegram Bot Token
TELE_BOT_WEB_LINK="" # ngrok public url in dev mode, public url in production
```
4. Start the bot
```bash
pnpm start:dev
```
We are good to go...
---
Open Telegram and get started. Congratulations!
# telegram-mini-app-next-js-starter
{errorMessage}