Next JS 13 feature Overview ( all in one video ) #03

let's learn all about Next JS 13 in this video (all features of next js 13)
   • Next JS 13 Server Side Rendering  

In this video, we are covering all these things

00:00 nest js 13 feature overviews
01:40 app directory-based routing
04:30 looking into how SSR works
06:00 client and server-side components
08:36 server side and client side components inside /app dir
09:50 difference between server and client components
12:00 mixing client and server components
16:40 directory with loading and error boundary components
18:12 API routes using pages
23:00 server components and their usages
26:00 server components with data fetch
28:00 Streaming and Fetching in Server Components
31:00 asynchronous components with suspense hooks
37:00 de-duplicating fetch request caching
39:40 Streaming and Fetching in client Components
41:30 adding use hook in client components
46:00 time to build demo applications


Next.js version 13 was announced recently and it brings huge changes to the framework. They collaborated directly with the React team to create the ultimate web framework and a new webpack replacement built with Rust... let's take a first look.

js 13 offers revised file routing with the new directory. The optional app directory brings a new layout structure with several additional features and improvements. The directory structure has undergone minor changes due to the new routing mechanism. Each path in the route has a dedicated directory with a page

NextJS Version 13, What's new?

Priority to Server Components:
NextJS is betting big on Server Components. If you have been catching up on React version 18, you might already be familiar with how React components now have the ability to render themselves as both Client & Server side Components.
Making Data Fetching Simpler
NextJS version 13 has completely changed the way of fetching data in your React apps. If you have been working with Next for quite some time, then you might be familiar with the data fetching methods like getServerSideProps(), getStaticProps(), getInitialPath() etc as we also have talked about these earlier. Starting NextJS 13, these methods are considered an anti-pattern and hence deprecated to use.
Making apps the new pages directory
One of the most talked about change in the NextJS ecosystem is the introduction of a new app directory. While you can still create a good old pages directory and can set up all your pages in it but while doing so, you will miss out on all the latest and exciting features offered by NextJS version 13.

Change in APIs
There are a few surface APIs that are being improved in the NextJS version 13 :
Image Component: If you have worked with NextJS, you know that the Image component is the defacto API for rendering images and is preferred over the native img tag. In NextJS 13, the Image component would ship less javascript to the client side and has some performance improvements.

@next/font:
Next 13 Announcement https://nextjs.org/blog/next-13
Turbopack Announcement https://vercel.com/blog/turbopack

🐦 Twitter:   / tkssharma  
🐦 Github: https://github.com/tkssharma
🐦 Website: https://tkssharma.com
🐦 Blogs: https://blog.tkssharma.com

I’m Tarun, I am Publisher, Trainer Developer, working on Enterprise and open source Technologies JavaScript frameworks (React Angular, sveltekit, nextjs), I work with client-side and server-side javascript programming which includes node js or any other frameworks Currently working with JavaScript framework React & Node js 🚀 with Graphql 🎉 developer publications.

I am a passionate Javascript developer writing end-to-end applications using javascript using React, Angular 🅰️, and Vue JS with Node JS, I publish video tutorials and write about everything I know. I aim to create a beautiful corner of the web free of ads, sponsored posts,