Skip to content

Commit

Permalink
Docs: Update template.js section (#54370)
Browse files Browse the repository at this point in the history
Fixes: https://vercel.slack.com/archives/C03S9JCH2Q5/p1692619927373449

- Updates wording on nesting, to say it's not the actual output, but rather how `template.js` nests between `layout.js` and its children.
- Remove mention of animations, needs further clarification.
  • Loading branch information
delbaoliveira authored Aug 22, 2023
1 parent f6d2aa0 commit f0ff3c4
Showing 1 changed file with 2 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -206,13 +206,10 @@ Templates are similar to layouts in that they wrap each child layout or page. Un

There may be cases where you need those specific behaviors, and templates would be a more suitable option than layouts. For example:

- Enter/exit animations using CSS or animation libraries.
- Features that rely on `useEffect` (e.g logging page views) and `useState` (e.g a per-page feedback form).
- To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.

> **Recommendation:** We recommend using Layouts unless you have a specific reason to use Template.
A template can be defined by exporting a default React component from a `template.js` file. The component should accept a `children` prop which will be nested segments.
A template can be defined by exporting a default React component from a `template.js` file. The component should accept a `children` prop.

<Image
alt="template.js special file"
Expand All @@ -234,7 +231,7 @@ export default function Template({ children }) {
}
```

The rendered output of a route segment with a layout and a template will be as such:
In terms of nesting, `template.js` is rendered between a layout and its children. Here's a simplified output:

```jsx filename="Output"
<Layout>
Expand Down

0 comments on commit f0ff3c4

Please sign in to comment.