20 / 24

List some use cases of templates.

Difficulty: 5/10
page templates, layout components, dynamic routing

There may be cases where you need those specific behaviors, and templates would be a more suitable option than layouts.

For example:
  1. 1

    Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).

  2. 2

    To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.

  3. 3

    A template can be defined by exporting a default React component from a template.js file. The component should accept a children prop.

Scenario Questions

0-2 years experience

  1. 1We need a simple blog where every post shares the same header and footer. How would you set up a template or layout in Next.js to avoid repeating that code?
  2. 2If you create a new page at pages/about.js and want it to use a different set of SEO meta tags than the rest of the site, how could you structure a template to handle that?
  3. 3What happens if you forget to export getStaticProps from a page that is supposed to use a data‑fetching template?

2-5 years experience

  1. 1Our marketing team wants a landing page that reuses a hero section but injects different promotional content per campaign. Walk me through how you'd implement this with a Next.js template and the trade‑offs you consider.
  2. 2A dynamic‑route page using a shared template is rendering stale data after a content update. How would you debug the issue and what changes to the template or data‑fetching strategy would you make?
  3. 3Why did a page that uses a layout template start throwing a hydration mismatch error after we added a client‑only component, and how would you resolve it?

5-8 years experience

  1. 1Design a scalable template system for a multi‑tenant SaaS on Next.js where each tenant can customize look and feel without forking the repo. What architectural patterns would you use and how would you handle CSS and asset isolation?
  2. 2Our SEO team needs to generate meta tags dynamically for thousands of product pages using a template. How would you keep the generation performant at build time and avoid exceeding Vercel build limits?
  3. 3We have a legacy Next.js app mixing class‑based and functional components that share a page template. How would you refactor the template layer to adopt the new App Router while minimizing risk?

8+ years experience

  1. 1The company plans to migrate all existing Next.js sites to a unified component library with templated layouts across multiple product lines. What governance model and migration strategy would you propose to keep teams productive and maintain consistency?
  2. 2Multiple teams need to share a common email template rendered server‑side in Next.js, but each has different compliance requirements (GDPR, branding). How would you design the template system to accommodate divergent constraints while keeping a single source of truth?
  3. 3We anticipate that the same Next.js templates must be rendered both on the web and as static PDFs for offline use. What architectural changes and tooling would you introduce to support this dual rendering pipeline at scale?

Follow-up Questions

  • Can you sketch the folder structure you would use?
  • What are the main pitfalls you’ve seen with this approach?
  • How would you verify that the template meets performance and SEO goals?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.