NextJS 13 - First Look at the /app Folder & Complete Demo

NextJS 13 introduces the beta version of the brand-new /app folder support. This folder allows you to build NextJS apps in a totally different way, simplifying the process of building nested layouts & routes as well as enhancing data fetching capabilities.
In this video, we'll explore some of the most important new features.
Keep in mind: It's not stable yet, not finished yet, not ready for production!
Also take a look at the official docs for more info
Docs: beta.nextjs.or...
Announcement blog post: nextjs.org/blo...
Join my NextJS course to learn all about NextJS: acad.link/nextjs
Finished code + all required code or styles files can be found in this repository: github.com/aca...
Join our Academind Community on Discord: academind.com/...
Check out all our other courses: academind.com/...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@SonnySangha]

Great explanation thank you!! 🎉

[@digitalgadgets2710]

Haha, I thought you will covering nextjs in your tutorials.

[@chetan9533]

...

[@shashydass4114]

Great video. The comparison on 12 to 13 and the code walkthrough was very informative. Looking forward to more NextJS 13 content.

[@paakofibamfoquaicoe4193]

Wooooooooooooooooooow, what a genuine overview of the NextJS 13.

[@bvedantcodes]

I'll be honest, React didn't excite me until NextJS. Thanks for your content!

[@shahariarniloy8935]

layout & nested or conditional layouts pages drags more attentions of mine. And I really like how easy now I can handle errors, every time it gives me headache when the page break due to any error. And nice work max, really appreciate your explanations!!

[@chandragie]

I never regret buying your NextJS course on Udemy!

[@juanganma9806]

Love you Max, great job, NextJS 13 is amazing! Love your courses!

[@academind]

Thank you so much! Really means a lot to me! :)

[@danielpesa6521]

This Video is more Great. Turbopack is more than Revolution on JS NEXTJS is the most wanted on world of developer More Thanx full 4 NEXTJS teams GOD BLESS EVERY ONE HERE

[@kakha13]

I finally decided to use next js after I saw version 13, I like it very much. Now it is simpler and similar to nuxt js. btw your videos are always the best

[@phucnguyen0110]

The Next 13 hype train continues, thanks Max!

[@codeDisclosure]

I was confused with these layouts after all those demo in nextjs conf .... but After this video it all make sense. Thank you so much for this, you are just awesome.

[@flaviodelgrosso4961]

Thank you Max, you're great. Excellent explanation as always!

[@OswaldChisala]

I have a landing page where I built a countdown timer in anticipation of our startup launch. I missed the deadline and the timer went negative, which threw an error and crashed my prod. So the thought of localizing uncaught errors with an errors.ts file is very captivating! I'm starting a new (and simple) project for a client today and wanna use nextJS 13 just to have fun with the app directory. Fortunately, it's pretty easy to roll back to v12 if things break. Awesome video, Max!

[@maskman4821]

Server side component is really awesome, thank you for the tutorial 😍

[@zombiefacesupreme]

"Can you fix this error for me?" "Sure, which file?" "Page.js"

[@licokr]

Wow, Easy to understand, Great video! Thank you! I think Nextjs13 is much easier to use. That's really intuitive

[@shoukathennadesigns5135]

I'm currently seeing your next js course you are amazing sir

[@amershboul9107]

you are great by simplifying things, thank you

[@okopyl]

Could you please help me? 1. How can I use use in a client component? When i get data with use, i get infinite fetchings. Could you please tell why and how to avoid it without getting data old way with useEffect? And without getting data in a root server component and then pass it as props to children. 2 If everything is now server components, how can we program user interactions without 'use client'? 3. If we always need 'use client' in order to program user interactions, then why everything is server components by default? I don't know any web app which doesn't have user interactions, hence there are more user interactive things in every web app that statically generated pages.

[@jeremytenjo]

Nextjs 13 is amazing!

[@davidvarela6020]

Excellent, clear instruction. Thanks so much!

[@manavnaharwal1921]

Too much excited for Nextjs 14😍

[@academind]

Should indeed be awesome!

[@monafdaod2133]

Thank you, Max. You're great

[@rayusaki88]

Thanks for this update, Max!

[@academind]

Happy to hear it's helpful!

[@dhawalparmar7117]

My favourite guru 💛

[@zainzahid99]

Thanks Max! That's the wonderful explanation

[@samsondawit4302]

so how do we change the head of our document in each of our pages, next/head is not working anymore?

[@thesunabsolute]

Great job as always, Max. Do you think we'll be seeing a full Prisma course in the future?

[@academind]

Not sure about a full course but more tutorials / content (on YT) is planned 👍 Maybe also a course - haven't really decided yet + got many ongoing projects right now.

[@usamaimran1516]

one thing that really bugs me is that I can't use hooks in server components, however, in nextjs v12 , we could use hooks in the pages that uses 'getServerSideProps', any thoughts?

[@moussaibrahem9]

Thanks a lot Max for this video!

[@ajaykumar-nx7kb]

Nice video, please make a complete course with backend api

[@allisonposey1946]

hey max, when will you update your nextjs course on udemy? it's still on version10

[@ericelnomada]

In the old way there is a file called _app.tsx in the page folder which usually requires some modification to add redux or next-themes or a provider, in the new app folder there is no _app.tsx, where do i add the providers now? Another question, i notice version 13 app folder comes with redux pre-instralled, how do i use it? c:

[@paullauren316]

Awesome video, sir!

[@aissa.bouguern]

Can we use the async/await approach and tell to Next.js to server-side render issues rather than statically generating them ?

[@davorinrusevljan6440]

is it possible to completely override layout in sublayouts?

[@ShahRukhKhan-fy1sz]

We need a NextJs + prisma course, would be great

[@academind]

Awesome combination, indeed. Can't promise a course just yet. But definitely want to create more Prisma content 👍

[@EmmanuelOppong-f4n]

How do you prevent the root layout from being applied to a particular page as it seems to be applied to all pages? For example a page without the navbar defined in the root layout but only a footer. Working on a project and need an answer to this.

[@marium98]

Very informative, thank you :)

[@zefirthefear9490]

hi, Max! do you plan to update the nextjs course? we need you. thanks for your work.

[@mediocreTyler]

great video, much appreciated!

[@nandoviski]

And how do you do forms without the api?? Because in forms you need to “use client” and cant call prisma in the page… can’t find any example with forms

[@preciousfrancismsongole4694]

This i going to be so amazing 🤩

[@asfnobambu]

Today, even without the --experimentar-app the new directory structure was built.

[@copilotcoder]

when are u going to update you course?

[@bikrantjungbudhathoki3687]

Hey, what if I wanted that main navigation to be in all pages and wanted to remove that navigation in login and signup page???

[@official.mhm13]

Great explanation ⚡

[@aakashsharma341]

sir in version 12 also there were nested layouts using Page.getLayout = function () { } , i think ver 13 approach is more lengthy

[@Ouchie]

Does the RFC (when making call to external api) work when you export next to a static html using "npx export"

[@incubated]

awesome tutorial as always. thank you!

[@academind]

Thank you so much!

[@dominiksiejka8858]

Hi, are you planning to create Nuxt 3 course ?

[@Mitsunee_]

personally I'll probably drop components unique to those routes in their respective place in the app folder and keep my src/components/ for components shared across any route. I used to heavily rely on jsconfig/tsconfig path aliases and that just kept breaking stuff for me... Edit: How does this "use client" directive work exactly? Will those components still be pre-rerendered, hydrated and then rerendered in the client as before or will they essentially act like my NoSSR component that prevents things from being prerendered in the first place?

[@zlackbiro]

Prisma constructor should be instantiated from libs/db folder and exported as client to be able for use everywhere. Not instantiate it multiple times because you cant use prisma features like middlewares and many more.

[@academind]

True. This video is not about Prisma, hence no time wasted on any special setup beyond the bare minimum

[@bobdpa]

Any advantages to exporting a named function compared to an anonymous function as a component?

[@rohitkf8474]

WHEN DOES THIS UPDATED NEXTJS video COME INTO YHE UDEMY COURSE ?

[@alidakoumi3291]

If im not wrong, in the docs they say its not possible to pass data from parent layout to its children, while they insist to fetch in the component itself: Warning: It's not possible to pass data between a parent layout and its children. However, you can fetch the same data in a route more than once and React will automatically dedupe the requests without affecting performance.

[@mr.random8447]

Oof so much repetitive code, that I thought doing in layout would solve

[@siya.abc123]

Time to rewrite your next.js apps again guys

[@paullauren316]

😂

[@Lucas-gt8en]

Perfect video!

[@academind]

Thank you so much! I'm happy you're liking it!

[@ahmedkarm7458]

Is there any plans for updating nextjs course on udemy?

[@ThugLifeModafocah]

Ohhh this is beautiful... I hate this pushing towards typescript. I thought that just changing the files and removing tsconfig would be enough, but didn't had the time to test yet, so seeing you doing it just warm my heart and my hope in the humanity is still alive. #fuckTypescript

[@victorkimura1]

Hi, Thanks for the wonderful videos. Will you have an update version of going more in-depth into an actual project? It looks like that you're using prisma too in this project folder. Would love to see larger project and how you handle things with Next 13. I've purchased one or two of your courses on Udemy btw. :)

[@OnlyJavascript]

When I installed I have both pages folder and app folder. I don't know why!

[@gyros9162]

Could you please update (if it is possible) the Authentication section in Next JS course. It seems like with Next JS 13 authentication is total mess

[@mattl7599]

You should use Typescript.

[@ShahRukhKhan-fy1sz]

Ah shit, I just completed a product with the old techniques, but the new features are amazing in Next 13

[@lardosian]

Re-write it immeadietly!!

[@ShahRukhKhan-fy1sz]

@@lardosian it won't be simple its a big enterprise application

[@lardosian]

@@ShahRukhKhan-fy1sz Ah ye just joking.

[@academind]

NextJS will support gradual adoption (i.e., gradually switching from pages/ to app/).

[@last-shinobi-of-the-oboro-clan]

@@academind I think it's gonna have to wait for about 2 or 3 months, for the NextJS team to actually complete fixing the bugs. For now, I will really suggest people to just stick with NextJS 12 before moving on to NextJS 13.

[@freespeech515]

how do i export nextjs 13 into static html. i am getting error "npm next export" after removing pages and using app directory

[@EvanBoldt]

The official v13 app playground is conspicuously missing the next export function, and if you add it it doesn’t work. It’s clearly untested.

[@rishiraj2548]

Thanks

[@phatnq2002]

I have a file: app/(auth)/login/page.js. In the app/page.js, I try to use router.push('/login'), but an error mess returned. It says, 'router push a null'? In general, there are many very interesting concepts. However, I feel like it's not stable yet.

[@avivshvitzky2459]

isn't your folder structure app/auth/login/page.js? Then your path is auth/login and not just /login

[@phatnq2002]

@@avivshvitzky2459 Nextjs 13 says, if a folder name is enclosed in the parentheses, it's bypassed in path. But, it not work in my case.

[@bswill5077]

How many page filename do you want? - YES.

[@keenanjet7879]

I understand that turbopack is in alpha and expected to take quite awhile before its stable however the new app folder support is in beta would this feature be something we could expect to be closer to stable in 1-2 months?

[@hamburger-fries]

Wonder how tRPC works in this new version?

[@Brennll]

Can we declare loading.js inside components?

[@omkarpathak9880]

Will u update u r current Next.Js course for NextJs 13 ? (I just bought your course, I know nothing about NextJs)

[@chesterxp508]

GoodJob!

[@Klickflip]

I have still one question. Is NextJS 13 not stable yet or is it still in beta? Also is it likely to change?

[@coder197]

hi. can i implement loading same on next 12

[@kenosabi]

Yall really went with the p orn hub theme 🤣

[@VoxInsightChannel]

Can anyone pls tell which color theme is he using pls?

[@sowedcastelli5159]

@Max, this is a great breakdown. Thank you so much. Can you also make one with a migration for locales that are not out supported by the v13 app structure

[@AnhPham-lr6hn]

you can make a video about getLayout in Nextjs

[@vicheanonmakaran3046]

Hello guys I have 0 knowledge of nextjs. So which one should I learn right now 12 or 13

[@oleggulevskyy168]

Uhm, why’d you opt out of TS for this demo? Are there issues with typings? Because deliberately going to JS is madness

[@Thilina4321]

❤️

[@yukselkapan9996]

I wonder how this can be used with i18n libraries

[@marnoux]

Why not just use typescript anyway.

[@JimmyC0]

what app do you use to draw on the screen?

[@abhimn7856]

You plan to update your udemy course?

[@academind]

Once the new features are stable and not a "beta-labeled alpha" => Yes, it's the plan.

[@kasper369]

I don't care if they copied the remix if they did. They need to do more copying and everything to make a framework better cooler and most importantly blazing fast

[@bvedantcodes]

The vercel team is great

[@d4yno]

okay I think we got it the first three times you said it xD ... It's NOT Stable!! Don't have to mention it every time hahah

[@sqbossh]

Great video, but please do not reduce the importance of typescript which is must have for every single Next.js project. We should not babysit js users when creating tutorials to please them with js version but encourage them to jump on the typescript already by simply using typescript always.

[@dhawalparmar7117]

Should I use this version in my professional project?

[@thesunabsolute]

No. Absolutely not.

[@dhawalparmar7117]

@@thesunabsolute okay 👍

[@avivshvitzky2459]

@@thesunabsolute I'm not sure its so unstable not to use. Hooks were also in Alpha before and I don't remember any bugs, or that their API changed at all

[@michaelscofield2469]

Please update your udemy nextjs cource

[@academind]

Please watch the video ;-) It's not even close to stable or production ready

[@blazi_0]

i have to learn typescript but i dont want to !!!!!!! God i feel like javascript will end my life soon

[@nate_codes]

The first ~4:20 of the video was pretty awesome but then you stopped using TypeScript so I stopped watching the video :(

[@academind]

TypeScript does not matter at all for what I'm showing. 🤷

[@ArunPrabu007]

Will next js overtake react js?

[@TheRFracer]

How? It's based on React and they cooperate

[@academind]

NextJS builds up on React, it doesn't offer an alternative

[@kamgdy89]

Why without TypeScript?

[@academind]

Doesn't make any difference here + but not everyone knows JS. Best of both worlds: Exclude no one but show all relevant features / parts. TypeScript wouldn't add anything here.

[@kamgdy89]

@@academind ok, I understand. By the way great job. I'm doing your course about React Native. It's great. Thanks Max!

[@sriramhegde1994]

@academind Why is thumbnail of this video has pornhub theme? 👻

[@johnjohn7023]

tRPC + NEXT + ZOD + PRISMA course

[@academind]

Awesome stack!

[@angelhdzdev]

kzbin.info/www/bejne/qaqoiJ-ui6uIqLs

[@noopurp123]

Nextjs 13 is the worst framework I have ever used. Nuxtjs is much better...

[@Almighty_Flat_Earth]

React js is a shame and blasphemy to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.

[@adacdharny6013]

Shitting on another library because you probably don't understand it is totally unnecessary

[@hoffix0123]

pajeet relax

[@last-shinobi-of-the-oboro-clan]

Too bad for you, the government did not create React, and they have no rights to ban it either. If you like using Angular, remember that Angular by default, is very heavy when you create a new component in one single project. VueJS is built based on Angular, so expect Vue to have the same problems. React is a Library, and its framework is NextJS. What framework to use is your choice, but commenting like you does not bring any information at all