nextjs template
1.0.0
このテンプレートは、開発者が次のテクノロジーとライブラリを使用してTelegram Mini AppsプラットフォームにWebアプリケーションを実装する方法を示しています。
テンプレートはPNPMを使用して作成されました。したがって、このプロジェクトにも使用する必要があります。他のパッケージマネージャーを使用すると、対応するエラーが表示されます。
このテンプレートをクローン化したばかりの場合は、コマンドを使用してプロジェクトの依存関係をインストールする必要があります。
pnpm installこのプロジェクトには、次のスクリプトが含まれています。
dev 。開発モードでアプリケーションを実行します。dev:https 。自己署名SSL証明書を使用して、開発モードでアプリケーションを実行します。build 。生産のアプリケーションを構築します。start 。本番モードでnext.jsサーバーを起動します。lint 。 ESLINTを実行して、コードの品質が必要な基準を満たしていることを確認します。スクリプトを実行するには、 pnpm runコマンドを使用します。
pnpm run {script}
# Example: pnpm run build 開始する前に、既に電報ボットを作成していることを確認してください。ここにそれを行う方法に関する包括的なガイドがあります。
MiniアプリはTelegramアプリケーション内で開かれるように設計されていますが、開発プロセス中はTelegramの外でそれらを開発およびテストすることができます。
開発モードでアプリケーションを実行するには、 devスクリプトを使用します。
pnpm run devこの後、端末に同様のメッセージが表示されます。
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9sアプリケーションを表示するには、ブラウザでLocalリンク（この例でhttp://localhost:3000 ）を開く必要があります。
@telegram-apps/sdkなどのこのテンプレートの一部のライブラリは、Telegram以外で使用することを意図していないことに注意することが重要です。
それにもかかわらず、それらは適切に機能しているように見えます。これは、アプリケーションのRootコンポーネントにインポートされているsrc/hooks/useTelegramMock.tsファイルが、 mockTelegramEnv機能を使用して電報環境をシミュレートするためです。このトリックは、テレグラムベースの環境で実行されていることをアプリケーションに納得させます。したがって、その意味を完全に理解しない限り、この機能を生産モードで使用しないように注意してください。
Telegramの外でアプリケーションを実行することは可能ですが、実際の機能を最も正確に表現するために、Telegram内で開発することをお勧めします。
Telegram内でアプリケーションを実行するには、@BotFatherにはHTTPSリンクが必要です。
このテンプレートはすでにソリューションを提供しています。
HTTPSプロトコルでリンクを取得するには、 dev:httpsスクリプトの使用を検討してください。
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s Localリンク（この例ではhttps://localhost:3000 ）にアクセスすると、次の警告が表示されます。
このブラウザ警告は正常であり、サイトが安全である限り安全に無視できます。 Proceed to localhost (unsafe)ボタンをクリックして、[アプリケーションを続行して表示します。
アプリケーションが正しく表示されたら、リンクhttps://127.0.0.1:3000 https://localhost:3000ボットファーザーによって無効と見なされます）を@botfatherへのミニアプリリンクとして送信します。次に、https：//web.telegram.org/k/に移動し、ボットを見つけて、Telegram Miniアプリを起動します。このアプローチは、完全な開発体験を提供します。
next.jsアプリを展開する最も簡単な方法は、next.jsの作成者からvercelプラットフォームを使用することです。
詳細については、next.js deploymentドキュメントをご覧ください。
