Up next in 10
Next.js App Router + FFMPEG WASM: Modern Video Editor with Server Components in Browser Web App
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/next-js-app-router-ffmpeg-wasm-modern-video-editor-with-server-components-in-browser-web-app/
Show More Show Less View Video Transcript
0:00
will show you a NexJS app router
0:03
with server components. I built out a
0:06
complete video editor in Nex.js. It's
0:09
actually using FMPG web assembly
0:11
library. So this is actually a full
0:14
video editor project. We running it on
0:16
local host. So I have this video which I
0:19
basically edited. I added the text. As
0:22
you can just see here, you can change
0:25
the color of the text. You have full
0:27
control over the positioning of the
0:29
text.
0:31
It's actually using it's a full fully
0:34
fledged project in nextJS app router and
0:37
server components. You can even change
0:39
the phone size as well. So same goes
0:42
with image as well. You can change the
0:44
width of the image.
0:46
Just place it accordingly.
0:50
You can even control the X position and
0:52
the Y position.
0:57
And then once you click the export
0:59
button, you can process your video. So
1:03
now you click the render button, it will
1:05
actually process your video frame by
1:07
frame and uh then you will get the
1:10
download video button. So once the
1:13
processing completes, you also get this
1:15
progress bar as well. So if you need the
1:17
source code of this, I've given the link
1:19
in in the description. You can directly
1:21
purchase it. So as you can just see
1:23
right here each and every file is
1:25
customizable. You can add more features
1:27
on top of this application by
1:29
customizing any of the files. And we are
1:32
using FMPG web assembly library. And
1:35
also we are using the latest version of
1:37
next and react
1:40
as you can just see here.
1:44
So it's actually using server components
1:48
and it's actually using router as well
1:50
for building this next.js project
1:56
and we are also using this library fMPPG
1:58
web assembly library which allows you to
2:01
actually directly edit videos in the
2:04
browser.
2:11
So you can easily deploy this
2:13
application as well by purchasing a
2:15
domain name and you can easily
2:19
run this locally as well.
2:22
So now as the processing completes you
2:24
will see the download button. So this is
2:27
your output video which looks something
2:29
like this and you can simply download
2:32
the video.