Playlist https://www.youtube.com/playlist?list=PLIGDNOJWiL1-qK8XrRkMlLwYCSuVWCPZp
let's learn all about Next JS 13
Github https://github.com/tkssharma/nextjs-training-2023

This video talk about the Jira end-to-end application development of nextjs 13 application
Here we are using Prisma for managing data and tables in postgres

- we have simple login and signup pages
- session management using cookies
- using Prisma migration and Prisma models
- Prisma migration to populate DB Tables
- we are using server components and client components
- Next js 13 API routes to build signing and signup routes
- Next js Middleware to protected API routes
- Next js API Routes
- Next JS server-side components
- Building APIs for Projects and Tasks

Timeline

00:00 next js showcase Jira Board App
01:15 layout grouping auth and dashboard
03:20 what we are building quick overview
05:51 creating page structure
07:00 building page APIs (login, register)
12:40 Prisma schema and Prisma migration
15:00 auth APIs to validate username, password
17:00 building auth utilities for auth token generation
22:00 setting cookies with a successful login
26:00 building logout and project API
29:00 next js middleware
34:00 adding fetch API wrapper
40:00 looking at client-side components
45:00 fetching project and tasks server components
49:00 Finally Demo time
50:00 checking cookies and playing with middleware

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: https://twitter.com/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,