MENU


template.js

Identical to layout.js, the file template.js is also applied to all the route segments corresponding to the subfolders.

However, unlike layout.js, the file template.js:

  1. regenerates the DOM during navigation sharing it.
  2. re-synchronizes effects.
  3. does not preserve states.
Below, "app/dashboard/profile/page.tsx" is a sub-component of the template, which in turn, is a sub-component of the layout.

When both layout.js and template.js are present in a folder, the effect is as the following:

<Layout> {/* Note that the template is given a unique key. */} <Template key={routeParam}>{children}</Template> </Layout>