nextjs template
1.0.0
Este modelo demonstra como os desenvolvedores podem implementar um aplicativo da web na plataforma Telegram Mini Apps usando as seguintes tecnologias e bibliotecas:
O modelo foi criado usando o PNPM. Portanto, é necessário usá -lo para este projeto também. Usando outros gerentes de pacotes, você receberá um erro correspondente.
Se você acabou de clonar este modelo, instale as dependências do projeto usando o comando:
pnpm installEste projeto contém os seguintes scripts:
dev . Executa o aplicativo no modo de desenvolvimento.dev:https . Executa o aplicativo no modo de desenvolvimento usando o certificado SSL autoassinado.build . Cria o aplicativo de produção.start . Inicia o próximo servidor.js no modo de produção.lint . Executa ESLint para garantir que a qualidade do código atenda aos padrões necessários. Para executar um script, use o comando pnpm run :
pnpm run {script}
# Example: pnpm run build Antes de começar, verifique se você já criou um bot de telegrama. Aqui está um guia abrangente sobre como fazê -lo.
Embora os mini aplicativos sejam projetados para serem abertos em aplicativos de telegrama, você ainda pode desenvolvê -los e testá -los fora do telegrama durante o processo de desenvolvimento.
Para executar o aplicativo no modo de desenvolvimento, use o script dev :
pnpm run devDepois disso, você verá uma mensagem semelhante em seu terminal:
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9s Para visualizar o aplicativo, você precisa abrir o link Local ( http://localhost:3000 neste exemplo) no seu navegador.
É importante observar que algumas bibliotecas neste modelo, como @telegram-apps/sdk , não se destinam ao uso fora do Telegram.
No entanto, eles parecem funcionar corretamente. Isso ocorre porque o arquivo src/hooks/useTelegramMock.ts , que é importado no componente Root do aplicativo, emprega a função mockTelegramEnv para simular o ambiente do telegrama. Esse truque convence a aplicação em que está em execução em um ambiente baseado em telegrama. Portanto, tenha cuidado para não usar essa função no modo de produção, a menos que você entenda completamente suas implicações.
Embora seja possível executar o aplicativo fora do Telegram, é recomendável desenvolvê-lo no Telegram para a representação mais precisa de sua funcionalidade do mundo real.
Para executar o aplicativo dentro do telegrama, o @botfather requer um link HTTPS.
Este modelo já fornece uma solução.
Para recuperar um link com o protocolo HTTPS, considere usar o script dev:https :
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s Visitando o link Local ( https://localhost:3000 Neste exemplo) No seu navegador, você verá o seguinte aviso:
Esse aviso do navegador é normal e pode ser ignorado com segurança enquanto o site estiver seguro. Clique no botão Proceed to localhost (unsafe) para continuar e visualizar o aplicativo.
Depois que o aplicativo for exibido corretamente, envie o link https://127.0.0.1:3000 ( https://localhost:3000 é considerado como inválido por botfather) como o link do Mini App para @botfather. Em seguida, navegue para https://web.telegram.org/k/, encontre seu bot e inicie o aplicativo Telegram Mini. Essa abordagem fornece a experiência completa de desenvolvimento.
A maneira mais fácil de implantar seu aplicativo Next.js é usar a plataforma Vercel dos criadores do Next.JS.
Confira a documentação do Next.JS de implantação para obter mais detalhes.
