nextjs-practices/layout-and-nested-layouts.js at main · jeevan42/nextjs-practices · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// File: layout-and-nested-layouts.js

/* 📘 Topic: Layout.js and Nested Layouts in Next.js (App Router)

Explains how layout.js helps share UI across pages, supports persistent layouts, and how nested layouts work for scoped areas like dashboards or user panels. */

/**

🔹 Basic layout.js example (shared across route group)

File: /app/layout.js */


export default function RootLayout({ children }) { return ( <html lang="en"> <body> <header>Global Header</header> <main>{children}</main> <footer>Global Footer</footer> </body> </html> ); }

/**

🔸 Nested Layout (e.g., Dashboard area)

File: /app/dashboard/layout.js */


export default function DashboardLayout({ children }) { return ( <section> <nav>Dashboard Sidebar</nav> <div>{children}</div> </section> ); }

/**

🧠 Important Notes:

Every folder with layout.js wraps its route's children.


Layouts are persistent: reusing state, not remounted on navigation.


Useful for keeping sidebar, modals, tabs, etc. persistent.


You can also use loading.js, error.js, and not-found.js in the same folder for enhanced UX. */


/**

✅ Summary:

Use layout.js in app/ to define structure.


Nest layouts for scoped experiences (e.g. admin panel)


Add loading/error boundaries per layout scope if needed. */