This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Setup Local Environment

You need to setup a few API keys for this project to be setup correctly otherwise you won't see any videos.

• Magic Server and Publishable Key
• Hasura Admin URL and JWT Secret
• Youtube API Key

For that, you need to create a .env.local file in your project as shown in docs that will look like this:

NEXT_PUBLIC_HASURA_ADMIN_URL=<REPLACE THIS>
JWT_SECRET=<REPLACE THIS>
NEXT_PUBLIC_HASURA_ADMIN_SECRET=<REPLACE THIS>
MAGIC_SERVER_KEY=<REPLACE THIS>
NEXT_PUBLIC_MAGIC_PUBLISHABLE_API_KEY=<REPLACE THIS>
YOUTUBE_API_KEY=<REPLACE THIS>

You can retrieve the above environment values by referring their docs linked above and once retrieved, paste above accordingly.

_ Important: Videos from Youtube _

During local development, we recommend you to add the environment variable DEVELOPMENT=true as that won't fetch videos from the Youtube API and instead access it from data/videos.json. Youtube API does have a quota and this way you can continue doing local development without worrying about running out of API calls.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

You can take a look at my blog for more Next.js related content: Blog

--

A Frontend Newsletter you'll love to help you grow as a Developer

In order to help you grow as a developer, You can subscribe to Frontend Snacks here

• I'll teach you one code snippet visually at a time
• Share the latest frontend news/gossip
• Share 1 Snack for thought