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

Enroll to the Full Stack React Course 👇
developedbyed....
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/dev...
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#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

[@naisunodansu]

Thanks Felix!

[@dev_franqqi]

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

[@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!

[@harrisonlawton9630]

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

[@wasiflatifhussain]

absolutely goated. i was looking for how to implement the paging system and this vid told me all I needed.

[@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. 🙏🏾

[@benjaminuwah1850]

Everything’s very easy to understand following your step

[@benjaminuwah1850]

My best online instructor

[@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.

[@nithinjunior8116]

Have a great journey ahead❤🎉

[@scottclarke953]

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

[@asher-youtube]

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

[@0xSoko]

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

[@dearvivekkumar]

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

[@guyfromdoon]

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

[@ichacodes]

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

[@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

[@semenpetrenko3316]

Which extension are you using for the autocomplete?

[@user-yh5bb9xz6e]

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

[@reggieandronnie]

Congratulations to you both!

[@edricko7]

Congratulations Ed😂🎉

[@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

[@user-oq3tr6wv1t]

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

[@rockNbrain]

Great job dude 🎉

[@gmartins-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"?

[@ShubhamSingh-gw9kq]

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

[@hossinhabil7743]

Thank you for the amazing video ❤

[@mikee2765]

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

[@sang4005]

Thanks

[@lukecartwright613]

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

[@acerpaulo7680]

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

[@iAmTheWagon]

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

[@deeep7578]

congrats 🎗

[@winningtech5]

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

[@adyawinsaate]

devEd

[@winningtech5]

@@adyawinsaate yeah. The old good devEd

[@dayachettri5157]

learned a lot from you

[@GriffinGradke]

Congratulations on getting married 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)

[@a99986]

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

[@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

[@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.

[@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!

[@eclipse6936]

the ttiming for this...i swear!

[@francisfuwaku]

congratulation.....happy and sweet marriage

[@emrahyigit]

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

[@abhinavbansal9396]

What is that wallpaper link? ??

[@Itspinky1995]

what theme or exstention is that for the cool folders icons

[@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"?

[@MusicsFree]

In this video you looking something changed!!

[@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. :(

[@m.nazran2087]

Cool desktop. where u get the background

[@_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?

[@maherylala2153]

Congrats on the wedding tho 🎉

[@abhilashm5236]

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

[@robertodelvalle9919]

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

[@tuantranvan8807]

thank you

[@aktoriukas]

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

[@Popo-hr6gc]

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

[@leomacdon7858]

Thank you sir

[@YoungHazeun]

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

[@antoniolucio5243]

thank u sr

[@zoltancaputo9562]

awesome tks

[@rpanda_old]

How to add fake delay

[@ekchills6948]

You're the best

[@simoncallelaverde]

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

[@judeugwu1996]

congratulation

[@nekoresOfficial]

🎉

[@7ala9at]

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

[@rabibarik1931]

Hi sir please help me for discation

[@DanoldNyamsi]

You're a mad guy 😂

[@arhabersham]

Congratulations ❤😃💍🎉

[@katadermaro]

Felix-box

[@Frost_Byte_Tech]

Exactly what I expected from marrying a South African 😂😂

[@emmanuel8944]

First to comment😅

[@Lasang824]

First 😳

[@greendsnow]

did he just say 'pewdiepie' ?

[@tomilola_ng]

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

[@emmanuelbanky5735]

Thought u where guy

[@wegene2056]

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

[@dayachettri5157]

😂😂 3-4 times

[@GarfieLD-Mami]

Thx bro