Make videos WITH REACT and NextJS announces Nested Routes
React is a pretty versatile library, but did you know you can also make videos with it?
NextJS is one of the most popular meta-frameworks for React. On their own site they're declared as:
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
They are constantly improving month to month. One of the more exciting features they’re offering is Nested routes/layouts. I typically use Remix and this has been an amazing, intuitive feature.
So, what is it?
Let’s take this example from the remix site:
app ├── root.jsx └── routes ├── accounts.jsx ├── dashboard.jsx ├── expenses.jsx ├── index.jsx ├── reports.jsx ├── sales │ ├── customers.jsx │ ├── deposits.jsx │ ├── index.jsx │ ├── invoices │ │ ├── $invoiceId.jsx │ │ └── index.jsx │ ├── invoices.jsx │ └── subscriptions.jsx └── sales.jsx
We have a folder structure. Each folder is its own route. Every folder (route) inside a folder is a nested route. These routes will appear as a nested part of the layout.
I suggest checking out this link for a more visual example:
Essentially, subsections of the page will be their own layout. This allows for errors inside a nested part of the page to be handled easier.
Remotion is a really unique library that allows you to make videos with the React UI API. Really recommend checking it out if you’re a fan of React and want to try something fun.
📦 More interesting articles