Hands-on React Server Components, Server Actions, and Forms in the Next.js App Router

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Discover how to optimize server-side rendering, enhance application interactivity with Server Actions and React 19 hooks, and create robust forms for efficient data handling and validation.

Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Preparations

• Make sure to have Nodejs LTS version (v20.15.0) installed: https://nodejs.org/en/download/package-manager/current. You can verify the installation in your terminal with “node —version”.
• Download the starter repo: https://github.com/aurorascharff/rsc-workshop-2hr-starter
• Open it in your editor (VS Code/Jetbrains IDE ..) and run “npm install”
• Follow the README to set up your local database with SQLite. Basically, just run:
  • “npm run prisma.push”
  • “npm run prisma.seed”
  • “npm run prisma.studio” to verify that data has been added
• Open the .code-workspace file inside the root directory
• Install Eslint and Prettier extensions/plugins
• Verify that Eslint and prettier are working by writing for example “const a = 'a’” in a component and save the file. It should automatically be removed. Formatting should automatically happen as well.