Templates vs Layouts in NextJs 13

[@kyle-andrewgovinder9902]

I absolutely love your content
Nextjs is easily one of the most in demand tech currently and you're providing one of most clear and concise resources for learning it all the way from the basics to the more advanced topics
I hope your channel continues to grow, you deserve every success

[@hamedbahram]

Thanks Kyle! I appreciate your comment, and I'm glad you're finding the videos helpful.

[@andrew_schaeffer]

Wonderful lesson thank you. I'm reading throught the NextJS docs now and am so glad you cleared up the difference between layouts and templates.

[@hamedbahram]

My pleasure! Glad it was helpful.

[@uzairahmed2975]

Thank you Hamed, This video makes a lot of sense to understand between layout and template.

[@hamedbahram]

Glad it was helpful!

[@samuelizevbizua]

Thank you Hamed, It's been nothing but Imppactful and Growth since i subscribed to your channel

[@hamedbahram]

My pleasure! Glad to hear that.

[@rohitghodeswar11]

Again top notch content on NextJS
Thank you, keep it up 👍🏻

[@hamedbahram]

My pleasure!

[@devmab]

Thank you so much for your support and teaching, I'm really understanding your explanations.

[@hamedbahram]

You are very welcome. Glad to hear that!

[@albert21994]

Clear and understandable examples. Thank you!

[@hamedbahram]

Glad it was helpful!

[@Gangbuster74]

congratulation for reaching 10k subs well deserving, your content is really great explaing all the bits and pieces of front end development

[@hamedbahram]

Thanks! I appreciate it.

[@anversadutt]

congrats bro for the 10K, keep rocking :)

[@hamedbahram]

Thank you so much 😀

[@hasancheraghi2800]

Thank you Hamed. I appreciate your fantastic tutorial

[@hamedbahram]

Anytime Hasan! I'm glad it was helpful.

[@nikhilpsathyanathan]

I thought it just like layout but this video is awesome. Got to know more about template' functionality

[@hamedbahram]

Glad it was helpful!

[@afshinkaramifar4429]

Such a great explanation, Well done Hamed👏

[@hamedbahram]

Thank you! 🫡

[@AhmedMohamed-q3v4o]

Best regards from Egypt

[@hamedbahram]

Welcome to the channel!

[@any_account-b6x]

Finally I understood that, thank you! 🙂

[@hamedbahram]

Glad it helped!

[@onyejemeemmanuel94]

Nice content. Thanks for explaining concept well

[@hamedbahram]

Glad it was helpful!

[@tysondolan1533]

You are a great instructor!

[@hamedbahram]

I appreciate that!

[@tatsumii1420]

we would love a framer motion video with nextjs

[@hamedbahram]

Absolutely! That has been overdue. Will work on it.

[@LorenzoSemorile]

Hi, thanks for the video. I was trying to use template "server side" but unfortunatly when you navigate with LInk component, the template it seems no refresh some other ""server side" component inside. Why? Thanks for the answer.

[@hamedbahram]

The template itself would re-render on every navigation but the server components inside are cached by default. There are different ways to opt your page components into dynamic rendering, but the easiest way is to use the `noStore` function. You can read about it here → nextjs.org/docs/app/api-reference/functions/unstable_noStore

[@LorenzoSemorile]

@@hamedbahram thanks a lot. I will try tomorrow and i will let you know. Sorry I’m learning nextjs framework in theese days. Thanks for your videos.

[@hamedbahram]

@@LorenzoSemorile Glad to help!

[@MohammedIbrahim-fl2sx]

i have a login page (Auth pages) how can i remove the components in RootLayout in those pages

[@hamedbahram]

You can use route groups to create to different layout. Watch this → th-cam.com/video/Go4rL15gYTs/w-d-xo.html

[@t2e0j0a4]

Hi really loved video. By the way what is the font u are using for VS Code editor

[@hamedbahram]

Thanks! I'm using Operator mono.

[@CHIRANJIBNANDY1]

beautifully explained

[@hamedbahram]

Thank you! 🙂

[@yuensc196]

clear explanation

[@hamedbahram]

Glad to hear that!

[@maskman4821]

Great tutorial ❤

[@hamedbahram]

Thanks! Glad you found it helpful.

[@Felipe-pb9gu]

Loving your videos, great content and well explained. Have a question, if you convert the template or the layout into a client component will all the childrens be client components too?

[@hamedbahram]

Thank! Glad to hear that. Re your question: only if you import a server component inside a client component will they turn into client components. You can pass server components as children as I did in the video without effecting the server-client boundary. Let me know if that's clear.

[@mahmoudmohamed-xu2lb]

so , we should use template to add exit route animations
i tried it but it dosen't work what key should i pass to AnimatePresence
and Thanks hamed for your amazing content

[@hamedbahram]

Yeah that should work, you can use any unique random key or the current path as the key.

[@arihantjain3274]

This is Gold

[@hamedbahram]

Thanks 🫡

[@RicardoBarbosaSousa]

Could you u use dark theme in the browser as well? 😊

[@hamedbahram]

I'll try it next time 🙂

[@samislam2746]

So what's the purpose of having a layout with a "use client"?
Anytime someone wants to use "use client' he can right away use a template instead.
And also, why would someone use template without 'use client"? Any case will always use "use client".?
I'm a bit confused.

[@hamedbahram]

Typically your layout is a server component that gets rendered once and remains the same when user navigates. The template on the hand will re-render every time because it uses a `key` prop. The template doesn't need to be a client component necessarily. I turned it into a client component in this example because I was using framer motion, but you don't need to.

[@toone4068]

thank you

[@hamedbahram]

You're welcome

[@samislam2746]

The mouse pointer in the video is not visible

[@hamedbahram]

Yeah when I switch screens the mouse hides. I'll have to remember to click on tabs before pointing at different things on the page. Thanks for the feedback.

[@raymondmichael4987]

Thanks buddy 😊

[@hamedbahram]

Any time!

[@shahryartavakkoli]

Thanks

[@hamedbahram]

Anytime!

[@AllahomAnsorGaza]

how to pass data we fetched in layout to children pages

[@hamedbahram]

Not a straight forward way to do that, but you don't need to pass props, just re-fetch your data on the page as well, and React will de-duplicate the request.

[@AllahomAnsorGaza]

you are great teacher ☺️
thanks for all of your efforts

[@hamedbahram]

@@AllahomAnsorGaza Thank you! I appreciate that.

[@moazamdev]

Does the template force the component to re-render?

[@hamedbahram]

Yes exactly.

[@tuRistst]

But if I want to hide the header for about page?

[@hamedbahram]

Then don't put it in that route group.

[@tuRistst]

Thanks, but I found a solution using Route Groups

[@2gbeh]

🇳🇬 Great job

[@hamedbahram]

Thanks!

[@hamidhamri5384]

the template is not rerendering, it is remounting completely again

[@hamedbahram]

That's what re-rendering means.

[@hamidhamri5384]

@@hamedbahram no, rerender and remount are two different things, they dont have same meaning and they dont do the same thing, remounting it means we remove the component from the browser dom then we mount it back and render (meaning runs component function), it is expensive, rerendering it means rerunning the component function again and rerun all the code inside that function, but the returned components from that components are not removed from the dom and remount back , so it is not expensive compared to remount

[@namesare4fools]

your tutorial is excellent but i think content like this can be shorten to at most 10 mins

[@hamedbahram]

Thanks for your suggestion.

[@SanderCokart]

I hope fixing exit animations on Templates is high on their roadmap, forced to use pages router for page animations

[@hamedbahram]

Hmm 🤔 didn't know there is a problem with exit navigation! I'll give it a try. Thanks for sharing.

[@SanderCokart]

@@hamedbahram templates document the use of exit animations but framer motions Animate Presence doesn't work with this because page is not the direct ancestor of the template

[@hamedbahram]

@@SanderCokart That's right. I just tested this, and while the exit navigation doesn't run, you can still animate the page. I changed the `main` tag that wraps the page in my template to `motion.main`

[@SanderCokart]

@@hamedbahram yes only initial and animate. Pages router is required till then.

[@sharpesthawk]

You are *"Jeff Goldblum"* right? Am I the only one who thinks that?

[@hamedbahram]

I'm not that old 😅

[@deepaksingh-qd7xm]

not good explanation

[@hamedbahram]

Thanks!