Next.js 13 - Layouts and Pages Explained in 20 mins or so

Enroll to the Full Stack React Course 👇
developedbyed.com/p/the-full-...
Heyo👋
In this video we are going to explain all the different kind of pages and layouts next.js 13 provides you.
If you have been avoiding the app directory, i'd highly recommend giving it a go today.
Here is an example github
github.com/developedbyed/next...
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react #webdevelopment

[@developedbyed]

Code 📔 github.com/developedbyed/next-pages-examples
Mess around with it live here ⚡: next-pages-examples.vercel.app/
Full Stack Next Course 13 🔥: developedbyed.com/p/the-full-stack-react-course

[@dev_franqqi]

The timing of this is amazing... literally started my next Js 13 journey yesterday...Thanks Ed❤️

[@harrisonlawton9630]

You're killing it with these great walkthroughs. Keep it coming!

[@paschalynukwuani6930]

Dev Ed has a reputation for doing great, concise and comprehensive tutorials. I appreciate you so much. This tutorial here was all I needed to understand Next.js better. Thanks for keeping it short and simple. You are the BEST man!

[@asher-youtube]

Exactly what I needed - thank you! ❤ Buying your course this week

[@naisunodansu]

Thanks Felix!

[@benjaminuwah1850]

Everything’s very easy to understand following your step

[@0xSoko]

Thank you! feeling much more comfortable with app router now :D

[@semenpetrenko3316]

Which extension are you using for the autocomplete?

[@leannemillar8839]

Congratulations to you both!

[@theifeanyi]

Thanks a lot Ed. Just to be clear though. 1.) I understand that loading is triggered once we are awaiting a render. so my question is we can have a loading.tsx in the main app directory and use it globally right? how will that work for each route. do we import it in each page.tsx? 2.) when we have multiple pages in a folder. say product list and the product details page in one folder. how do we manage it since each file is called page.tsx ? Sorry i am still new to nextjs

[@hossinhabil7743]

Thank you for the amazing video ❤

[@squidux]

and just like that, I've been spending 3 hours trying to figure out what I was doing wrong, read docs and everything and in less then 3 minutes I got my answer. 🙏🏾

[@maxwebstudio]

I tried and really love the DX with the app folder.
I find it to be a way more efficient and easy way to go.
But till it is not production ready, we kinda stuck with the 'normal' approach

[@youssefmahmoud6268]

Thanks a lot, i have a question please, i want to make two layouts, very layout has its own nav that i do not need to import it in very page, layout for client and layout for dashboard.

[@benjaminuwah1850]

My best online instructor

[@rockNbrain]

Great job dude 🎉

[@nithinjunior8116]

Have a great journey ahead❤🎉

[@_kadirmetin]

Thanks for the video Ed. I have a question. I made a blog project, so I want an admin panel. I don't want to use global layout in my admin area. How can I use two layouts in one project?

[@guilhermemm-dev]

Is there a way to implement the new reusable layout.tsx in a NextJs v14 project but still use the old NextJs "pages" folder instead of "app"?

[@Popo-hr6gc]

Is naming the file index.tsx (instead of page.tsx) deprecated in Nextjs 13? Or will it still work?

[@user-oq3tr6wv1t]

How is the loading.tsx triggered from within page.tsx in the movies-loading folder?

[@noooOne462]

is there a way so that the first fetch is from the server and the rest if the user changes something like query than from the client

[@Itspinky1995]

what theme or exstention is that for the cool folders icons

[@dearvivekkumar]

wallpaper is too awesome... That is first thing got noticed. 😀

[@user-yh5bb9xz6e]

how are your tags are fetching components from server just by hovering over the link?

[@m.nazran2087]

Cool desktop. where u get the background

[@ShubhamSingh-gw9kq]

I liked yout pc homepage theme, its so soothing, where can I find it?

[@edricko7]

Congratulations Ed😂🎉

[@luizmeraki]

Please, someone explain me one thing. The folders like: components, assets, services... should inside of app folder or it's not necessary?? Is there something about at the docs?

[@bartbroekhuizen5617]

Is it not better to use Suspense Api when your movies are still loading, seems quicker and neater (less routing)

[@thinBillyBoy]

Ed, can you help me solve this? I can only use .env.local in the root dir and not under utils for some reason, and I'm stumped because others can use it under util like you did here. :(

[@iAmTheWagon]

Oh please do a video on Parallel Routes and Intercepting. 🙏😚

[@nithinjunior8116]

Thank you sir for teaching us for free,
I want to learn and work with you.
i have make all project that u have made,,,and even more.,, I am student of 2nd year...and please tell how can i grab internship.

[@sang4005]

Thanks

[@mikee2765]

very nice thank you. Hope you drop the low background music

[@leomacdon7858]

Thank you sir

[@a99986]

is ti possible to change page.tsx defaul file name and brake in to part

[@guyfromdoon]

Most required video... Also first comment 🫡🫡❤

[@emrahyigit]

Is there a reason why we see this "app" folder in all videos, even though the Next says it's beta?

[@YoungHazeun]

hi! does anyone knows what vscode theme he use in the video?

[@ichacodes]

Yes. The slow loading thing is a real problem, people will leave the site thinking it's error

[@eclipse6936]

the ttiming for this...i swear!

[@robertodelvalle9919]

Hello, does anyone knows what vscode theme he use in the video?

[@tuantranvan8807]

thank you

[@behold_a_son]

How does next know to load page.tsx after loading.tsx. You haven't added any logic specifically.
Is this a default next feature that calls loading.tsx if page.tsx is loading? Is that unique to the filename "loading.tsx"?

[@lukecartwright613]

Congrats on getting married!! 👰🏻🤵🏻‍♂ I remember when you announced engagement :D

[@maherylala2153]

Congrats on the wedding tho 🎉

[@acerpaulo7680]

i feel like hugging you right now thanks alot at least i van sleep now😅

[@MusicsFree]

In this video you looking something changed!!

[@deeep7578]

congrats 🎗

[@antoniolucio5243]

thank u sr

[@zoltancaputo9562]

awesome tks

[@nekoresOfficial]

🎉

[@dayachettri5157]

learned a lot from you

[@abhilashm5236]

if i declare "use client" in layout (not root layout), will all its children be a client component ..?

[@GriffinGradke]

Congratulations on getting married Ed!

[@scottclarke953]

Congratulations on your wedding !!!!!🎉🎉🎉🎉🎉🎉🎉 I hope you and your beautiful wife are having a wonderful time. 👍👍👍👍👍👍👍👍

[@judeugwu1996]

congratulation

[@ekchills6948]

You're the best

[@winningtech5]

I forgot this man was still in this space. He changed his name

[@adyawinsaate]

devEd

[@winningtech5]

@@adyawinsaate yeah. The old good devEd

[@7ala9at]

please can u talk about nextjs with laravel api authentication? crash course in youtube :)

[@rpanda_old]

How to add fake delay

[@aktoriukas]

worth mansioning that this is still beta & need explicitly to choose app layout to use it.

[@rabibarik1931]

Hi sir please help me for discation

[@DanoldNyamsi]

You're a mad guy 😂

[@simoncallelaverde]

Dev Ed, why don't you import instead of :S
Brah, this new Zelda game coming out soon is driving me nuts

[@arhabersham]

Congratulations ❤😃💍🎉

[@francisfuwaku]

congratulation.....happy and sweet marriage

[@akash.deblanq]

Felix-box

[@emmanuel8944]

First to comment😅

[@Frost_Byte_Tech]

Exactly what I expected from marrying a South African 😂😂

[@Lasang824]

First 😳

[@greendsnow]

did he just say 'pewdiepie' ?

[@emmanuelbanky5735]

Thought u where guy

[@tomilola_ng]

When you are teaching, endeavour to turn off Co-pilot it is very distracting

[@wegene2056]

am i the only one heard b**b*s not movies?🧒🧒🧒 6:35

[@dayachettri5157]

😂😂 3-4 times

[@bwustinbweem]

i feel so dumb. been stressing over my page loading time and i never thought about loading.tsx file. i dont know if i just missed that in the docs or what but whatever, its fixed now!

[@GarfieLD-Mami]

Thx bro