nextjs template
1.0.0
Diese Vorlage zeigt, wie Entwickler eine Webanwendung auf der Telegram Mini Apps -Plattform mit den folgenden Technologien und Bibliotheken implementieren können:
Die Vorlage wurde mit PNPM erstellt. Daher muss es auch für dieses Projekt verwendet werden. Mit anderen Paketmanagern erhalten Sie einen entsprechenden Fehler.
Wenn Sie gerade diese Vorlage kloniert haben, sollten Sie die Projektabhängigkeiten mit dem Befehl installieren:
pnpm installDieses Projekt enthält die folgenden Skripte:
dev . Führt die Anwendung im Entwicklungsmodus aus.dev:https . Führt die Anwendung im Entwicklungsmodus mithilfe selbstsignierter SSL-Zertifikat aus.build . Erstellt die Produktionsanwendung.start . Startet den nächsten.js -Server im Produktionsmodus.lint . Führen Sie eslint aus, um sicherzustellen, dass die Codequalität den erforderlichen Standards entspricht. Verwenden Sie zum Ausführen eines Skripts den Befehl pnpm run :
pnpm run {script}
# Example: pnpm run build Stellen Sie vor Beginn sicher, dass Sie bereits einen Telegrammbot erstellt haben. Hier ist ein umfassender Leitfaden, wie es geht.
Obwohl Mini -Apps so konzipiert sind, dass sie in Telegrammanwendungen geöffnet werden, können Sie sie während des Entwicklungsprozesses weiterentwickeln und testen.
Verwenden Sie das dev , um die Anwendung im Entwicklungsmodus auszuführen:
pnpm run devDanach sehen Sie eine ähnliche Nachricht in Ihrem Terminal:
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9s Um die Anwendung anzuzeigen, müssen Sie den Local Link ( http://localhost:3000 in diesem Beispiel) in Ihrem Browser öffnen.
Es ist wichtig zu beachten, dass einige Bibliotheken in dieser Vorlage, wie @telegram-apps/sdk , nicht außerhalb des Telegramms vorgesehen sind.
Trotzdem scheinen sie richtig zu funktionieren. Dies liegt daran, dass die Datei src/hooks/useTelegramMock.ts , die in der Root der Anwendung importiert wird, die mockTelegramEnv -Funktion verwendet, um die Telegrammumgebung zu simulieren. Dieser Trick überzeugt die Anwendung, die er in einer Telegrammbasis ausführt. Seien Sie daher vorsichtig, diese Funktion im Produktionsmodus nicht zu verwenden, es sei denn, Sie verstehen ihre Auswirkungen vollständig.
Obwohl es möglich ist, die Anwendung außerhalb des Telegramms durchzuführen, wird empfohlen, sie innerhalb von Telegramm für die genaueste Darstellung seiner realen Funktionalität zu entwickeln.
Um die Anwendung in Telegram auszuführen, benötigt @BotFather einen HTTPS -Link.
Diese Vorlage bietet bereits eine Lösung.
Um einen Link mit dem HTTPS -Protokoll abzurufen, sollten Sie das Skript dev:https verwenden:
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s Besuchen Sie den Local Link ( https://localhost:3000 In diesem Beispiel) in Ihrem Browser sehen Sie die folgende Warnung:
Diese Browserwarnung ist normal und kann sicher ignoriert werden, solange der Standort sicher ist. Klicken Sie Proceed to localhost (unsafe) um fortzusetzen und die Anwendung anzusehen.
Sobald die Bewerbung korrekt angezeigt wurde, senden Sie den Link https://127.0.0.1:3000 ( https://localhost:3000 wird von Botfather als ungültig angesehen) als Mini -App -Link zu @BotFather. Navigieren Sie dann zu https://web.telegram.org/k/, suchen Sie Ihren Bot und starten Sie die Telegramm -Mini -App. Dieser Ansatz bietet die gesamte Entwicklungserfahrung.
Der einfachste Weg, um Ihre Next.js -App bereitzustellen, besteht darin, die Vercel -Plattform von den Erstellern von Next.js. zu verwenden.
Weitere Informationen finden Sie in der Next.JS -Bereitstellungsdokumentation.
