One of the recent Telegram updates finally brought full power of web apps right into Telegram messenger. It means that from now on any dev can embed an MMO game, a ticket store or any other app inside built-it Telegram browser and make it available for 700 millions of users. There is no limits, it's fully functional browser inside messenger. Telegram Web App API provides user information, theme scheme, haptic feedback (only on mobile/laptop devices), access to video and audio streams. You can check this bot test all possibilities and see what information is provided to web app -- https://t.me/asmico_attach_bot ---- In order to build you own web app for Telegram with React and Next.js you'll need to get information from the app. I'd like to share some code snippets and tips that you can copy-paste and use for a quicker start. As a first step let's add types to know what data is available for you: ```typescript // types.ts export interface ITelegramUser { id: number; first_name: string; last_name: string; username: string; language_code: string; } export interface IWebApp { initData: string; initDataUnsafe: { query_id: string; user: ITelegramUser; auth_date: string; hash: string; }; version: string; platform: string; colorScheme: string; themeParams: { link_color: string; button_color: string; button_text_color: string; secondary_bg_color: string; hint_color: string; bg_color: string; text_color: string; }; isExpanded: boolean; viewportHeight: number; viewportStableHeight: number; isClosingConfirmationEnabled: boolean; headerColor: string; backgroundColor: string; BackButton: { isVisible: boolean; }; MainButton: { text: string; color: string; textColor: string; isVisible: boolean; isProgressVisible: boolean; isActive: boolean; }; HapticFeedback: any; } ``` As a next step, let's create a context provider and custom hook for Telegram Web App data: ```typescript // TelegramProvider import Script from "next/script"; import { createContext, useContext, useEffect, useMemo, useState } from "react"; import type { ITelegramUser, IWebApp } from "types"; export interface ITelegramContext { webApp?: IWebApp; user?: ITelegramUser; } export const TelegramContext = createContext({}); export const TelegramProvider = ({ children, }: { children: React.ReactNode; }) => { const [webApp, setWebApp] = useState(null); useEffect(() => { const app = (window as any).Telegram?.WebApp; if (app) { app.ready(); setWebApp(app); } }, []); const value = useMemo(() => { return webApp ? { webApp, unsafeData: webApp.initDataUnsafe, user: webApp.initDataUnsafe.user, } : {}; }, [webApp]); return ( {/* Make sure to include script tag with "beforeInteractive" strategy to pre-load web-app script */}

bitofuniverse

Telegram Web App with React and Next.js

Join Our Newsletter. No Spam, Only the good stuff.