Add example: with-apivideo-upload

[MarDi66]

This example uses api.video.
It allows users to upload a video, see the different steps of video ingest, and watch it when it's done.

1. User clicks a button and selects a video
2. Ingest steps are displayed
3. User clicks on a button to navigate to the player view
4. Uploaded video is playable at a unique URL

Here's a demo of the application

This example implements Next.js features:

• SWR hook - fetch the upload token
• /pages/api routes - get the upload token and the video's status
• environment variables (.env.development) - store the API key
• Dynamic client-side routes - unique URL for player view
• Dynamic api routes - videoId to get video's status
• getServerSideProps - get video's id, width and height from URL server-side
• next-router - navigate through views

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General

	vercel/next.js canary	apivideo/next.js canary	Change
buildDuration	17.9s	18.1s	⚠️ +122ms
buildDurationCached	6.8s	6.4s	-398ms
nodeModulesSize	484 MB	484 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	apivideo/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.073	4.086	⚠️ +0.01
/ avg req/sec	613.76	611.8	⚠️ -1.96
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.934	1.937	0
/error-in-render avg req/sec	1292.63	1290.81	⚠️ -1.82

Client Bundles (main, webpack)

	vercel/next.js canary	apivideo/next.js canary	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72 kB	72 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	apivideo/next.js canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	apivideo/next.js canary	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.05 kB	3.05 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.73 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.36 kB	2.36 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	apivideo/next.js canary	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	apivideo/next.js canary	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

---

Default Build with SWC (Increase detected ⚠️)

General

	vercel/next.js canary	apivideo/next.js canary	Change
buildDuration	22.7s	20.5s	-2.2s
buildDurationCached	7.5s	6.8s	-685ms
nodeModulesSize	484 MB	484 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	apivideo/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.586	4.043	-0.54
/ avg req/sec	545.18	618.35	+73.17
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.014	1.937	-0.08
/error-in-render avg req/sec	1241.48	1290.71	+49.23

Client Bundles (main, webpack)

	vercel/next.js canary	apivideo/next.js canary	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.7 kB	28.7 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.6 kB	72.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	apivideo/next.js canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	apivideo/next.js canary	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.03 kB	3.03 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.77 kB	5.77 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.44 kB	2.44 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.1 kB	16.1 kB	✓

Client Build Manifests

	vercel/next.js canary	apivideo/next.js canary	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	apivideo/next.js canary	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: 3bcc38d

[josebarcelon]

LGTM !

[MarDi66]

Any chance I can get a new review? 😄

[balazsorban44]

Just upgrading to the latest Could not apply suggestions to your branch, so it can be addressed later. Thanks for the PR!

[balazsorban44]

Thanks!

[MarDi66]

@balazsorban44 Thanks for the approval! Is it possible to get a review from someone else?

[balazsorban44]

Looks like there is a merge conflict, hence the CI did not proceed to merge. Could you remove the yarn.lock file change? We recently moved to pnpm and changing the lock file when adding an example is not necessary anyway.

I can re-approve when that's done and then it should be auto-merged. 👍

[MarDi66]

Should be good now @balazsorban44 👍🏼

[balazsorban44]

Merging manually as the bot could not update the PR: https://github.com/vercel/next.js/pull/36050/checks?check_run_id=7215856755

@MarDi66 for your interest on future PRs. You likely need to allow maintainers to make edits.

[MarDi66]

Thank's for this @balazsorban44 🙏🏼