Note: More recent examples are available

This example was built with an older version of Next.js. For examples using more recent versions of Next and other frameworks, please see our most current demos and starter kits.

Virtual Event Starter Kit

Demo: https://demo.vercel.events

This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 live attendees. It includes the following features:

• Multiple stages with an embedded YouTube stream
• Sponsor expo, including individual virtual booths
• Career Fair, allowing attendees to network and find job opportunties
• Ticket registration and generation
• Speaker pages and bios
• Schedule

This platform is built upon three principles:

• Delegation: Running a conference is difficult – you have to delegate tasks to third-parties to ensure success. Certain elements of an online conference experience are tough to get right, and we'd rather lean on established, industry leading solutions.
• Flexibility: While delegating certain elements of the conference experience is helpful, it's also important to own the platform. That's why this template provides a flexible open-source codebase that can be modified for your event.
• Reducing Risk: It's inevitable something will go wrong during your event. This platform reduces risk by leaning on a dynamic site that outputs as static files using Incremental Static Generation. These static files are cached, ensuring your site is never down. Then, it uses API Routes to sprinkle dynamic content on top, which are hosted by a provider with 99.99% uptime.

Built With

• Framework: Next.js
  • CSS Modules
  • TypeScript
• Videos: YouTube
• Deployment: Vercel
• Authentication: GitHub OAuth
• Database: Redis

Running Locally

First, set local environment variables. We've included a read-only DatoCMS access token you can use in .env.local.example.

1
cp .env.local.example .env.local

Then install packages and run the development server:

1
yarn install
2
yarn dev

Open http://localhost:3000 with your browser to see the result.