What is the difference between layout.js and template.js in Next.js?

Q: What is the difference between layout.js and template.js in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build, a running server or a real browser. ## 1. Why This Even Matters — A Story First Think of a hotel. The **layout** is the building: the lobby, the lifts and the corridor stay exactly as they are while you walk from room 101 to room 102. If you left your coat on a chair in the lobby, it is still there. The **template** is housekeeping: every time a new guest enters a room, the room is reset to its default state, fresh towels and an empty minibar, even though the building around it never changed. Both wrap the rooms. The only question is whether what is inside them is kept

The problem

Question presented to candidate: "Both layout.tsx and template.tsx wrap the pages in a folder. What is the actual difference, and when would you reach for a template instead of a layout?"

What a strong answer should cover:

A layout is mounted once and kept across navigations between its child routes, so Client Component state, DOM and running effects survive.
A template sits in the same place in the tree but gets a unique key per child segment, so it and everything under it remount: state resets, effects run again, the DOM is recreated.
The nesting order: layout wraps template, template wraps error, loading, not-found and page.
Use cases for a template: per-page enter animations, effects that must re-run on each navigation (logging, focus), forms that must start empty, showing a Suspense fallback on every navigation.
Search-param-only changes do not remount a template; only a change of its own child segment (including dynamic params) does.
Both are Server Components by default and both receive children; prefer a layout and treat a template as the exception.

Clarifying questions expected:

"Is the state that should reset local to one component?" — a key on that component may be enough, without a template.
"Is Cache Components enabled?" — then pages are kept alive with React Activity, which changes what "navigating away" means for state.

Code / implementation expected: Yes — a layout with a persistent input and a template with an effect that logs each page view.

nextjs
layout
template
routing

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against real output from a build, a running server or a real browser.

1. Why This Even Matters — A Story First

Think of a hotel. The layout is the building: the lobby, the lifts and the corridor stay exactly as they are while you walk from room 101 to room 102. If you left your coat on a chair in the lobby, it is still there. The template is housekeeping: every time a new guest enters a room, the room is reset to its default state, fresh towels and an empty minibar, even though the building arou

The solution is hidden so you can try first

9 min read · 9 sections

Read the code

A dashboard with a persistent layout and a resetting template

// app/dashboard/layout.tsx
import Link from "next/link";
import SearchBox from "./SearchBox";

// Mounted once for every /dashboard/* page: SearchBox keeps its typed text across navigations.
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <section>
      <nav>
        <Link href="/dashboard/settings">Settings</Link> <Link href="/dashboard/billing">Billing</Link>
      </nav>
      <SearchBox />
      {children}
    </section>
  );
}

// app/dashboard/template.tsx
import PageViewLogger from "./PageViewLogger";

// A new instance for every child page: its Client Components remount and their effects run again.
export default function DashboardTemplate({ children }: { children: React.ReactNode }) {
  return (
    <div className="fade-in">
      <PageViewLogger />
      {children}
    </div>
  );
}

// app/dashboard/SearchBox.tsx
"use client";
import { useState } from "react";

export default function SearchBox() {
  const [q, setQ] = useState("");
  return <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search the dashboard" />;
}

// app/dashboard/PageViewLogger.tsx
"use client";
import { useEffect } from "react";
import { usePathname } from "next/navigation";

export default function PageViewLogger() {
  const pathname = usePathname();
  useEffect(() => {
    // Runs on every navigation between child pages, because the template remounts.
    console.log("page view", pathname);
  }, [pathname]);
  return null;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.