--- title: Next.js 14: Layouts vs Templates | daily.dev description: Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates... canonical: https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Next.js 14: Layouts vs Templates | daily.dev og:description: Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates... og:url: https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r og:image: https://api.daily.dev/og/posts/mSqO4eh1r.png og:image:alt: Next.js 14: Layouts vs Templates og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Next.js 14: Layouts vs Templates **[builder.io](https://daily.dev/sources/builderio)** · 1 min read · 248 upvotes · 5 comments ## Summary Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates remount with each page transition. Layouts ensure consistency, maintain state, and boost performance, while templates provide isolation, behavioral flexibility, and the ability to alter default behaviors. Choosing between layouts and templates depends on the specific needs of each page and the desired balance between user experience and performance. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@falbertengo** · 1 upvotes > I've noticed the "use client", which left me thinking: Is then a template actually a client component and a layout a server component? > > Or i'm mixing concepts? **@arsalanmalik** · 1 upvotes > good! **@dedaldinodev4** · 0 upvotes > Good Man!! ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#frontend](https://daily.dev/tags/frontend), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Next.js 14: Layouts vs Templates","url":"https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r"},"datePublished":"2023-12-04T17:50:22.492Z","dateModified":"2023-12-04T17:50:19.977Z","description":"Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6840a1cbfeda04dce106541184454aa4?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6840a1cbfeda04dce106541184454aa4?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"builder.io","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"builder.io","logo":"https://media.daily.dev/image/upload/s--jap1dv3o--/f_auto/v1721914613/squads/builderio","url":"https://daily.dev/squads/builderio"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":248},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"webdev,react,frontend,nextjs","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"builder.io","item":"https://daily.dev/squads/builderio"},{"@type":"ListItem","position":3,"name":"Next.js 14: Layouts vs Templates"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r","comment":[{"@type":"Comment","text":"I’ve noticed the “use client”, which left me thinking: Is then a template actually a client component and a layout a server component?\nOr i’m mixing concepts?","datePublished":"2023-12-06T03:01:36.429Z","dateModified":"2023-12-06T03:02:04.182Z","url":"https://daily.dev/posts/mSqO4eh1r#c-wDaBm9kKD","author":{"@type":"Person","name":"Fernando Albertengo","url":"https://daily.dev/falbertengo","image":"https://lh3.googleusercontent.com/a/ACg8ocK2yb0fSWyeNvUIhvmfbQ7upzxvOZGo2tq0oJI3J80fgtZF=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"good!","datePublished":"2024-01-05T10:55:06.583Z","url":"https://daily.dev/posts/mSqO4eh1r#c-g7n3Gpe44","author":{"@type":"Person","name":"Arsalan malik","url":"https://daily.dev/arsalanmalik","image":"https://lh3.googleusercontent.com/a/AAcHTteyE1_KnxS5Ox0pMF1wX-XQljLNnoFxhTRgrM4hMg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Good Man!!","datePublished":"2023-12-13T08:21:44.957Z","url":"https://daily.dev/posts/mSqO4eh1r#c-HiL4nbuxu","author":{"@type":"Person","name":"Dedaldino Daniel","url":"https://daily.dev/dedaldinodev4","image":"https://avatars.githubusercontent.com/u/73763999?v=4"}}]} ```