2024-02-19
3430
#nextjs
Ibadehin Mojeed
172517
109
Feb 19, 2024 â‹… 12 min read

A guide to Next.js layouts and nested layouts

Ibadehin Mojeed I'm an advocate of project-based learning. I also write technical content around web development.

Recent posts:

When is low-code the right choice? Here’s how to decide

Not sure if low-code is right for your next project? This guide breaks down when to use it, when to avoid it, and how to make the right call.

Popoola Temitope
Jul 11, 2025 â‹… 7 min read
Comparing AI App Builders — Firebase Studio vs. Lovable vs. Replit. LogRocket Article

Comparing AI app builders — Firebase Studio vs. Lovable vs. Replit

Compare Firebase Studio, Lovable, and Replit for AI-powered app building. Find the best tool for your project needs.

Emmanuel John
Jul 11, 2025 â‹… 7 min read
Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 â‹… 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 â‹… 11 min read
View all posts

3 Replies to "A guide to Next.js layouts and nested layouts"

  1. Thank you!
    Very helpful, I like both approaches though I prefer the App Router approach. I am testing this in Typescript since it is my language of choice. I just saw a new update 6hrs ago. Once again thank you and also for keeping it up to date.

    Greets from Sweden

  2. Hi, please help, I am working on nextjs V14.1.4.

    This is my folder structure->
    (authorized)
    ->learner-materials
    ->feedback
    page.tsx
    ->report
    page.tsx
    ->session
    page.tsx
    ->layout.tsx

    I have a folder (authorized) inside this (authorized) folder I have all authorized routes.

    and I have one RootLayout inside the authorized folder.

    and I have a learner-material route inside learner material I have 3 subroutes

    like this
    /learner-materials/feedback
    /learner-materials/report
    /learner-materials/session

    whenever the user navigates between learner material routes like feedback to report or session, the whole of root layout loads again which causes an unnecessary API call.
    how can I solve this problem please help.

  3. Excellent, I find both methods useful Doodle Jump ; but, the App Router one is more to my liking. Since Typescript is my preferred language, I am evaluating it in that environment. I noticed a new update six hours ago. Again, I appreciate it, and I also appreciate that you keep it current.

Leave a Reply