Skip to content

Latest commit

 

History

History
27 lines (18 loc) · 2.16 KB

20-Templates.md

File metadata and controls

27 lines (18 loc) · 2.16 KB

Layouts vs. Templates in Next.js

Layouts

  • Purpose: Layouts are used to provide a consistent structure and shared components (like headers, footers, or navigation) across multiple pages.
  • State Persistence: Components within a layout are not remounted when navigating between pages that share the same layout. This means that state is preserved, and components like input fields retain their values.
  • File Definition: Defined by exporting a default React component from a layout.js or layout.tsx file.
  • Usage: Ideal for elements that should remain constant across different pages, such as site-wide navigation or persistent UI components.

Templates

  • Purpose: Templates are similar to layouts but are designed to create new instances of components when navigating between routes. This means DOM elements are recreated, state is not preserved, and effects are re-synchronized.
  • State Reset: When a user navigates between routes sharing a template, the components are remounted, and state is reset.
  • File Definition: Defined by exporting a default React component from a template.js or template.tsx file.
  • Usage: Suitable for scenarios where you need fresh instances of components on navigation, such as when you want to reset form fields or reinitialize component state.

Combining Layouts and Templates

  • Rendering Order: When both layouts and templates are used, the layout is rendered first, followed by the template, and then the page content.
  • Use Case: Use layouts for persistent UI elements and templates for components that should reset or reinitialize on navigation.

When to Use Which

  • Use Layouts: When you need to maintain state across pages, such as keeping a sidebar open or preserving form inputs.
  • Use Templates: When you want to ensure that components are reset on navigation, such as when navigating between different instances of a form where you want to clear previous inputs.

By understanding the differences between layouts and templates, you can choose the right approach for your Next.js application based on the desired behavior of your components and state management needs.