저는 Next.js Conf 2020 에 참석했고 고품질 콘텐츠와 가상 회의 설정에 깊은 인상을 받았습니다. 전 세계에 스트리밍되었으며 모범 사례, 최종 사용자 사례 및 프런트엔드 개발자와 해당 조직을 위한 전략을 공유할 수 있는 기회를 제공했습니다. 이 모든 것에는 특정 회의 플랫폼이 필요했고 솔루션을 구매하는 대신 "성공은 협업에 달려 있었습니다".

Next.js 및 Vercel

프런트엔드 개발의 선구자인 Vercel은 이번 주에 80,000명의 등록자와 40,000명의 실시간 참석자가 있는 Next.js Conf 2020을 실행하는 데 사용되는 Virtual Event Starter Kit을 발표하고 소개했습니다.

Virtual Event Starter Kit는 Next.js 및 Vercel을 사용하여 마케팅 담당자와 개발자 간의 협업 제품입니다.

이벤트를 시작하고 모든 규모로 확장

온라인 이벤트에 대해 원하는 대로 복제, 배포 및 완전히 사용자 지정할 수 있습니다. 기본적으로 다음과 같은 기능이 포함되어 있습니다.

- YouTube 스트림이 포함된 여러 단계
- 개별 가상 부스를 포함한 박람회 후원
-채용 박람회, 참석자들이 네트워크를 형성하고 취업 기회를 찾을 수 있도록 합니다.
-티켓 등록 및 생성
-발표자 페이지 및 약력
-일정

내장

프레임워크: Next.js
CSS Modules
TypeScript
CMS: DatoCMS
동영상: 유튜브
배포: Vercel
인증: GitHub OAuth
데이터베이스: Redis

로컬에서 실행

먼저 로컬 환경 변수를 설정합니다. 읽기 전용 DatoCMS 액세스 토큰이 포함되어 있으며 .env.local.example에서 사용할 수 있습니다.
cp .env.local.example .env.local
다음 단계는 패키지를 설치하고 개발 서버를 실행하는 것입니다.

yarn install
yarn dev

결과를 보려면 브라우저에서 http://localhost:3000을 엽니다.

1단계: 복제 및 배포

Click here Vercel에서 이 템플릿을 복제하고 배포하려면:



DatoCMS에 가입하거나 로그인하고 데이터(예: 연사, 무대 등)를 기반으로 새 DatoCMS 프로젝트를 생성할 수 있는 통합DatoCMS을 설치하라는 메시지가 표시됩니다.

DatoCMS는 정적 웹 사이트, 모바일 앱 및 모든 종류의 서버 측 애플리케이션과 함께 작동하도록 설계된 클라우드 기반 헤드리스 CMS입니다.



첫 번째 가상 회의 또는 이벤트가 배포된 것처럼 간단합니다.

2단계: 필요에 맞게 맞춤화

기본값을 사용하거나 자체 데이터베이스, 인증 및 헤드리스 CMS를 선택하십시오.

CMS

다른 콘텐츠 관리 시스템을 사용하도록 코드를 수정할 수 있습니다. 자세한 내용은 여기lib/cms-api.ts를 확인하세요.

상수

lib/constants.ts에는 사용자 정의해야 하는 변수 목록이 포함되어 있습니다.

디스코드 채팅 추가

유사한 기능을 이벤트에 추가하려면 Discord 봇을 생성한 후 API 경로를 사용하여 메시지를 가져올 수 있습니다. 추가 정보 및 설명서를 찾을 수 있습니다here.

입증

일부 기능은 인증 및 데이터베이스를 설정할 때까지 작동하지 않습니다. 데모(demo.vercel.events)는 인증에 GitHub OAuth를 사용하고 데이터베이스에 Redis를 사용합니다.

이것은 매우 멋진 기능입니다 😎: GitHub 프로필과 Twitter, LinkedIn 또는 다운로드에서 공유할 수 있는 티켓 URL로 고유한 티켓 이미지를 생성하세요.

결론

가상 이벤트와 플랫폼은 팬데믹 이후의 표준이 될 수 있습니다. 코로나바이러스 대유행이 우리 모두에게 정상적인 모습을 바꾸어 놓았다는 것은 분명하며 이벤트 및 컨퍼런스 산업도 다르지 않습니다. Virtual Event Starter Kit – Vercel에 대해 자세히 알아보고 설명서click here를 확인하십시오.

📣이번 주 Vercelannounced은 시리즈 B 펀딩에서 추가로 4천만 달러를 "모두가 다음 웹을 구축할 수 있도록 돕기 위해"사용할 예정입니다.

🚀 다음 놀라운 일이 무엇인지 봅시다!

나와 연결하려면 내 Github 또는 를 확인하십시오.

읽어주셔서 정말 감사합니다!