You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The following section lists a very high-level overview of common strategies. The simplest takeaway is to choose a strategy that works for you and your team and be consistent across the project.
303
303
304
304
> **Good to know**: In our examples below, we're using `components` and `lib` folders as generalized placeholders, their naming has no special framework significance and your projects might use other folders like `ui`, `utils`, `hooks`, `styles`, etc.
305
305
306
-
### Store project files outside of `app`
306
+
####Store project files outside of `app`
307
307
308
308
This strategy stores all application code in shared folders in the **root of your project** and keeps the `app` directory purely for routing purposes.
309
309
@@ -315,7 +315,7 @@ This strategy stores all application code in shared folders in the **root of you
315
315
height="849"
316
316
/>
317
317
318
-
### Store project files in top-level folders inside of `app`
318
+
####Store project files in top-level folders inside of `app`
319
319
320
320
This strategy stores all application code in shared folders in the **root of the `app` directory**.
321
321
@@ -327,7 +327,7 @@ This strategy stores all application code in shared folders in the **root of the
327
327
height="849"
328
328
/>
329
329
330
-
### Split project files by feature or route
330
+
####Split project files by feature or route
331
331
332
332
This strategy stores globally shared application code in the root `app` directory and **splits** more specific application code into the route segments that use them.
333
333
@@ -375,7 +375,7 @@ To opt specific routes into a layout, create a new route group (e.g. `(shop)`) a
375
375
376
376
### Opting for loading skeletons on a specific route
377
377
378
-
To apply a [loading skeleton](/docs/app/api-reference/file-conventions/loading) via a `loading.js` file to a specific route, create a new route group (e.g., `/(overview)`) and then move your `loading.tsx` inside that route group.
378
+
To apply a [loading skeleton](/docs/app/building-your-application/routing/loading-ui-and-streaming) via a `loading.js` file to a specific route, create a new route group (e.g., `/(overview)`) and then move your `loading.tsx` inside that route group.
379
379
380
380
<Image
381
381
alt="Folder structure showing a loading.tsx and a page.tsx inside the route group"
@@ -389,7 +389,7 @@ Now, the `loading.tsx` file will only apply to your dashboard → overview page
389
389
390
390
### Creating multiple root layouts
391
391
392
-
To create multiple [root layouts](/docs/app/api-reference/file-conventions/layout#root-layout), remove the top-level `layout.js` file, and add a `layout.js` file inside each route group. This is useful for partitioning an application into sections that have a completely different UI or experience. The `<html>` and `<body>` tags need to be added to each root layout.
392
+
To create multiple [root layouts](/docs/app/api-reference/file-conventions/layout#root-layouts), remove the top-level `layout.js` file, and add a `layout.js` file inside each route group. This is useful for partitioning an application into sections that have a completely different UI or experience. The `<html>` and `<body>` tags need to be added to each root layout.
0 commit comments