Nextjs 13 complete tutorial

In this video we will be doing a quick tutorial on #Nextjs 13 beta
beta.nextjs.org/docs
0:00 Introduction
0:14 Creating Nextjs 13 app
1:15 Folder structure
1:45 Index page
2:54 Root layout file (_app.jsx)
4:32 Creating a new page
5:55 Link from next/link
6:53 Posts page
8:06 Client components
10:30 Fetching data
13:02 Slugs (route params)
18:20 getStaticProps equivalent
18:42 revalidate data
19:14 getServerSideProps equivalent
20:12 revalidate, serverSideProps with a Database
22:28 nesting layouts
26:38 Error page & handling errors
29:07 Loading pages
31:04 Not found page
33:17 CSS modules
34:40 Co-locating components
--------------------------------------------------------------------------
📦FREE $100 credit @Digital Ocean: m.do.co/c/3208f08b3324
--------------------------------------------------------------------------
Subscribe: kzbin.info...
--------------------------------------------------------------------------
💵Support the channel:
Paypal: www.paypal.me/trulymittal
Patreon: / trulymittal
--------------------------------------------------------------------------
======================
✔ Other useful Playlists
======================
#RestAPI (#NodeJS and MongoDB): • REST API using NodeJS ...
#API Authentication using #JWT: • NodeJS API Authenticat...
#Firebase: • Firebase | Build a Not...
Docker: • Docker
MongoDB: • Learn MongoDB in 50 mi...
Html/Css/Js: • HTML / CSS / JS
Android: • Android
Challenges: • Challenges
#tutorial #howto #nodejs #nextjs ‪@mafiacodes‬ #javascript #react

[@lakshitsagar6299]

Honestly this was the best video guide for nextjs 13 ......Thanks a lot....All of the concepts were so clearly and nicely demonstrated....Thanks..

[@mafiacodes]

Glad it helped!

[@ToadyEN]

Great tutorial, very to the point, much appreciated :)

[@hengkyvanderhouff3572]

thank you so much, just started learning next, this is exactly what i need fast pace to the point!

[@mafiacodes]

Subscribe like share 👍

[@Ali-kx7jf]

Great tutorial 👌 keep it up! 💯

[@weforyouweb1165]

Wow really good explanation 🥳🎉

[@usmanmughal5916]

Very nice Bro.

[@ajaygandhi2949]

Thanks bro

[@patite3103]

When I create a project from scratch using Next.js 13 can I delete the folders "node_modules" and "pages"? Thank you

[@devs_nazmul]

Please Make a Full Tutorials Brother, You Explained Awesome

[@mafiacodes]

Thank you, I will

[@AbhayKumarSrivastava]

This is one of the best post I've seen on nextjs 13. Can you show me how to add a responsive Navbar here.

[@Lerndemy]

legend

[@mafiacodes]

Subscribe like share 👍

[@prathyuprasad2914]

❤❤

[@Lichkuroro]

is this project deployable? do you encounter any red flags on npm run build?

[@mafiacodes]

Nopes I do not, but not yet recommended for production since it’s still a experimental feature. Subscribe like share 👍

[@okeyshourovroy2769]

Can we use axios instead of fetch?

[@mafiacodes]

Yup

[@imakhlaqXD]

Can you make a tutorial for Nextjs 13 for some like me who have worked with React but not much with Nextjs. Every tutorial on web is outdated now.

[@mafiacodes]

did this not help...?

[@ilan117]

Thank you so much ❤ I’m using the same api that have a Images object so e.g post/id and an object of images I run a map inside the single post component …. If you can show us how would you resolve that in client or server side it would be great ְ⁠🤲

[@mafiacodes]

If you wanted to only display data, no interactivity from user, then use it as a Server component otherwise use as client component. Rule of Thumb: Split your components that has data as well as interactivity like a button/form into two separate components, for DATA use server components and Interactivity use Client component.

[@ilan117]

@@mafiacodes thank you very much ! So the loop over images could actually work with the server (normal) component ? For some reason it complied .. I think it was boundry/hydrate problem 🥲 I hope you can show an example 🙏

[@okeyshourovroy2769]

How to implement apollo client or axios instead of fetch in next13

[@mafiacodes]

Watch @ 20:11 To use axios or Apollo client or database query directly do that inside the server component, like I have used the fetch API. To revalidate like in getStaticProps or to run on every request like getServerSideProps use Route Segment Config Options (beta.nextjs.org/docs/api-reference/segment-config)

[@nikantkamat8992]

what about the support with redux

[@mafiacodes]

You can use it in client components like you do with any state management library.

[@hicksinguefield8309]

pr໐๓໐Ş๓