Name: Primer on Next.js App Router Nested Layouts
Uploaded: 2023-08-02T19:36:58-05:00
Description: Before we start migrating routes we will get a high level understanding of nested layouts in the app router

Primer on Next.js App Router Nested Layouts

Primer on Dynamic Routing in the Next.js App Router

Migrate Invoice Routes to Next.js App Router

Migrate Remaining Next.js Pages to App Router

Migrate UploadThing Route Handler to Next.js App Router 

CHALLENGE: Migrate Remaining Pages Api Routes

Refactor React Invoice Client Components in Next.js

Refactor Next.js User Info Api Route into React Server Components

Refactor Invoice POST Handler to Next.js Server Action

Refactor Next.js API Route for Deleting a Deposit Into a Server Action

Refactor Create Deposit Api Route into a Next.js Server Action

Next Migration Course Extras

Before we start migrating routes we will get a high level understanding of nested layouts in the app router

https://app.egghead.io/api/v1/lessons/next-js-primer-on-next-js-app-router-nested-layouts/subtitles

Instructor: [0:01] Nested layouts in the app router are really simple. As we've already seen, if we come to our app, we have our nav bar and we have our dashboard page. If we come to our dashboard page, we aren't having to recall our layouts.

[0:17] The layout in the root directory gets applied to the dashboard page as well. The big difference now is that in this dashboard route, we can create another layout.tsx file. Here, we can export the function.

[0:42] We want to pass it to children. We'll return a fragment. Then we'll return an h1 that says, The Dashboard Layout. If we save this first and we come back over here and refresh, we'll see that all we're getting is the dashboard layout.

[0:59] If we now call the children prop and save it, we are getting the dashboard layout and then the dashboard page. Whatever we add in the dashboard layout gets applied to the dashboard page. It would also apply to any subroutes under the dashboard route.

[1:17] In review, we saw how simple it is to create a nested layout in theAapp router. All that we needed to do was come into a subroute, create a layout.tsx file, pass the children as a prop, and then in the returned markup, just make sure that we put the children in the markup as well.

[1:36] Having done that, all of the markup will be applied to the subroute page and any further routes created in that subroute.

Primer on Next.js App Router Nested Layouts

Share this video with your friends

Course

Next Migration Course Extras