nextjs template
1.0.0
이 템플릿은 개발자가 다음 기술 및 라이브러리를 사용하여 Telegram Mini Apps 플랫폼에서 웹 응용 프로그램을 구현하는 방법을 보여줍니다.
템플릿은 PNPM을 사용하여 작성되었습니다. 따라서이 프로젝트에도 사용해야합니다. 다른 패키지 관리자를 사용하면 해당 오류가 발생합니다.
이 템플릿을 방금 복제 한 경우 명령을 사용하여 프로젝트 종속성을 설치해야합니다.
pnpm install이 프로젝트에는 다음 스크립트가 포함되어 있습니다.
dev . 개발 모드에서 응용 프로그램을 실행합니다.dev:https . 자체 서명 된 SSL 인증서를 사용하여 개발 모드에서 응용 프로그램을 실행합니다.build . 생산 응용 프로그램을 구축합니다.start . 생산 모드에서 다음.js 서버를 시작합니다.lint . 코드 품질이 필요한 표준을 충족하도록하기 위해 ESLINT를 실행합니다. 스크립트를 실행하려면 pnpm run 명령을 사용하십시오.
pnpm run {script}
# Example: pnpm run build 시작하기 전에 이미 Telegram Bot을 만들었는지 확인하십시오. 다음은 방법에 대한 포괄적 인 가이드입니다.
미니 앱은 Telegram Applications 내에서 열리도록 설계되었지만 개발 프로세스 중에 전보 외부를 개발하고 테스트 할 수 있습니다.
개발 모드에서 응용 프로그램을 실행하려면 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 3000 ( https://localhost:3000 Botfather에 의해 유효하지 않은 것으로 간주) @botfather에 대한 미니 앱 링크를 제출하십시오. 그런 다음 https://web.telegram.org/k/로 이동하여 봇을 찾아 Telegram Mini 앱을 시작하십시오. 이 접근법은 완전한 개발 경험을 제공합니다.
Next.js 앱을 배포하는 가장 쉬운 방법은 Next.js의 제작자의 Vercel 플랫폼을 사용하는 것입니다.
자세한 내용은 Next.js 배포 문서를 확인하십시오.
