nextjs-practices/app-directory-routing.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// File: app-directory-routing.js

/* 📘 Topic: App Directory Routing in Next.js 13+

This file explains how routing works in the App Directory introduced in Next.js 13+. Learn about folders, layout.js, page.js, route.js, loading.js, and error.js */

/**

🧱 Folder-based Routing Structure:

app/


├── layout.js        → shared layout for all child routes

├── page.js          → renders the route’s page component

├── loading.js       → optional fallback during loading

├── error.js         → optional error handling component

└── dashboard/

├── page.js

├── layout.js

├── settings/

├── page.js

Each folder = a route. Each page.js = that route's entrypoint. */


/**

📄 Example: /app/dashboard/page.js */ export default function DashboardPage() { return <h1>Dashboard</h1>; }


/**

🧩 layout.js in /app/dashboard/ */ export default function DashboardLayout({ children }) { return (

 <div>
   <aside>Sidebar</aside>
   <main>{children}</main>
 </div>
); }

/**

🌀 loading.js — used for loading UI during lazy data fetching */ export default function Loading() { return <p>Loading...</p>; }


/**

❗ error.js — error boundary for the current route subtree */ export default function ErrorBoundary({ error }) { return <div>Something went wrong: {error.message}</div>; }


/**

✅ Summary:

App directory promotes co-location of logic (page, layout, loading, etc.)


Great for modular and scalable projects


Replaces old file-based pages/ system (though both can coexist temporarily) */