### Next.js starter template

## Next.js Virtual Event Starter Kit

### This Next.js starter template was used to run the Next.js Conf 2020, with 40,000 live attendees

[

**Want to create your own starter project?** Learn how to do that in our documentation!

](https://www.datocms.com/docs/general-concepts/project-starters-and-templates.md#generate-a-project-starter-button)

## 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](https://www.datocms.com/marketplace/starters.md).

## [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit)

### Demo: [https://demo.vercel.events](https://demo.vercel.events/)

This virtual event starter kit was used to run [Next.js Conf 2020](https://nextjs.org/2020/conf), 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](https://nextjs.org/docs/basic-features/data-fetching). These static files are cached, ensuring your site is never down. Then, it uses [API Routes](https://nextjs.org/docs/api-routes/introduction) to sprinkle dynamic content on top, which are hosted by a provider with 99.99% uptime.

### Built With

-   Framework: [Next.js](https://nextjs.org/)
    -   [CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support)
    -   [TypeScript](https://nextjs.org/docs/basic-features/typescript)
-   Videos: [YouTube](https://www.youtube.com/)
-   Deployment: [Vercel](https://vercel.com/)
-   Authentication: [GitHub OAuth](https://docs.github.com/en/free-pro-team@latest/developers/apps/authorizing-oauth-apps)
-   Database: [Redis](https://redis.io/)

## Running Locally

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

```plaintext
cp .env.local.example .env.local
```

Then install packages and run the development server:

```bash
yarn installyarn dev
```

Open [http://localhost:3000](http://localhost:3000/) with your browser to see the result.