You will love Next JS 13(beta) changes

tkssharma - Feb 28 '23 - - Dev Community

Guys,

Welcome to my new tech toy (Next JS 13)
Recently i am exploring next js 13 which looks really nice when i am trying to write basic demo apps.

https://github.com/tkssharma/nextjs-training-2023

Let's go through some of the plug and play tools of Next JS, for reading about what is new in Next JS then official Docs and very good to know more about it (https://nextjs.org/blog/next-13)

  • app Directory (beta): Easier, faster, less client JS.
  • Layouts
  • React Server Components
  • Streaming
  • Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement.
  • New next/image: Faster with native browser lazy loading.
  • New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
  • Improved next/link: Simplified API with automatic .

Playlist
https://www.youtube.com/watch?v=tSfKoY2Zzf8&list=PLIGDNOJWiL1-qK8XrRkMlLwYCSuVWCPZp

This playlist talk about all the changes in next js and how we can build next js 13 apps, we are looking into major topics like

  • server components
  • /app directory based routing
  • client and server based components
  • adding loading and error page for routes
  • nested layouts in next js
  • data fetching in server components
  • async loading and suspense api with sync components
  • nest js page based api
  • accessing ORM and database from server components and page apis
  • Demo showcase application like movies app, smart project manager with tasks
  • session management with user login and register
  • state management in client based components
  • deployment of next js to netlify/vercel

I will keep adding more videos to this playlist as i am loving the changes next js 13 provides, my main relief is now we don't have these getServerSideProps and getStaticPaths like methods to fetch data in server side pages

Everything is simplified and it more looks more like sveltekit latest changes, sveltekit also gone throught major changes and it follows same aspects like folder based routes and data fetching mechanism.

Happy Coding

Keep Learning as i will keep posting latest stuff on my channel
https://www.youtube.com/user/vibbbbbba?sub_confirmation=1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .