State in web applications can have many forms. It can be local component state, global application state, browser state or shareable URL state . The latter is a special form of state that is stored in the URL which then can be shared with others or saved for later use. Once this URL is visited again, the application's state is restored from the…
I have been working with React Server Components and Server Actions in Next.js for the last 6 months. While I am excited about Server Components and their ability to execute code on the server, I am not convinced (yet) by the story of data fetching in Client Components (without Server Actions). Since I have seen the question ("Can I fetch data with…
I explored Server Actions in Next.js 14 using Next's App Router and React Server Components (RSC). This comprehensive tutorial shows how to use Server Actions to create, read, update, and delete (CRUD) entities. Currently I am working on a new course called "The Road to Next" which will hopefully match the popularity of The Road to React . We…
I delved deep into exploring Authentication in Next.js 14 using Next's App Router, React Server Components (RSC), and Server Actions. This comprehensive tutorial covers using Lucia Auth for sign up, sign in, sign out, and protected routes. If you want to go beyond this with the implementation of password change, password reset, forgot password…
A short tutorial about seeding a database with Prisma in a TypeScript application. I decided to write this tutorial, because many of my other tutorials depend on a database with an initial seeding and I want to reference it. Prisma: Seeding with TypeScript We will assume the following model for our database in the *prisma/schema.prisma** file: We…
A short tutorial about setting up a Next.js application with Prisma and SQLite. I decided to write this tutorial, because many of my other Next.js tutorials depend on a database and I want to reference it. Why this ORM and database? Prisma is a great tool to interact with databases and SQLite is a simple database to get started with. Next.js: Setup…
I delved deep into exploring Forms in Next.js 14 using Next's App Router, React Server Components (RSC), and Server Actions. This comprehensive tutorial covers React/Next native aspects like useFormStatus , useFormState and revalidatePath . The tutorial also provides detailed insights into form validation using Zod, error handling on a fine…
