Next 13 Templates vs. Layouts: Which One Fits Your Needs?

Layout and template are considered reserved files in Next.js. As you may already know, reserved files are a set of special files provided by Next.js to create user experiences with special behaviors in nested routes.

what is the layout in the next 13:

A layout in Next.js is a shared user interface structure used across multiple pages. It serves as the wrapping container for our pages, preserving their state and interactivity during navigation without triggering unnecessary re-renders. Layouts can also be nested to create complex UI structures. In practice, you define a layout by exporting a default React component from a layout.js file. This component should accept a children prop, which will be populated with either a child layout (if one exists) or a child page when rendering. Layouts simplify the management of consistent UI elements across different parts of your application, enhancing the user experience.

Next JS layout typescript example:

export default function DashboardLayout({
 children, // will be a page or nested layout
}: {
 children: React.ReactNode
}) {
 return (
  <section>
   {/* Include shared UI here e.g. a header or sidebar */}
   <nav></nav>

   {children} {/* Renders the child page or nested layout */}
  </section>
 );
}        

What is Template in Next 13:

what is the template: A template is like a container that wraps around each child layout or page in a web application. However, it differs from layouts in a crucial way. While layouts persist across different routes and maintain their state, templates create a fresh instance for each of their children when users navigate between routes. This means that if multiple routes use the same template, a new copy of the template component is created, the web page elements are rebuilt from scratch, any previous state is not retained, and any effects are re-synchronized.

Next JS Template typescript example:

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}        

Template VS layout in the next 13

Template:

• Wrap each child layout or page.
• Create a new instance for each child during navigation.
• Result in the recreation of DOM elements.
• Do not preserve the state from previous instances.
• Re-synchronize effects with each navigation.
• Typically used within layouts.

Layout:

• Persist across routes.
• Maintain state between route changes.
• Do not recreate DOM elements.
• Retain state from one route to another.
• Do not require effect re-synchronization.
• Can contain templates and serve as top-level structures for page

Can I use templates and layouts at the same time?

Yep, we can have a template.js and a layout.js file in the same folder. So let's say we have the following:

/app
    layout.js
    page.js
    template.js        

Then, according to the NextJs official documentation, the final output will be:

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

How to Choose Between Templates and Layouts ( When to Use Each One)?

Templates in Next.js are best when you need specific behaviors like using useEffect for logging page views or managing per-page feedback forms. They’re also useful when you want to alter the default framework behavior, such as showing Suspense Boundaries fallbacks on every page navigation. On the other hand, Layouts in Next.js offer great performance advantages because they avoid remounting shared components and make state management straightforward. They should generally be your default choice. However, there are situations where Next.js templates are more suitable: When you want to display suspense boundaries fallbacks not only during the initial page load but also on subsequent navigations. When you have client components that require hooks like useEffect( used in react lifecycle hooks) or useState to run with each page load, such as implementing enter or exit CSS animations for pages.

Happy coding!

This article was originally published on my Medium(Layouts VS Templates In Next 13: Mastering Layouts and Templates for a Seamless UX).

You can follow me on Medium.