📄️ Introduction to Server Actions
What are Server Actions?
📄️ Tech Stack
Here are the technologies we use in this project:
📄️ Usage
This section provides detailed information on how to use Next.js Server Actions. You can find different usage scenarios and examples in the following sub-sections:
📄️ TypeScript Server Actions Return Type
File Structure
📄️ Example Types
Below are generic entity types that can be used as a base for your database models. These follow a consistent pattern that can be extended for specific use cases.
📄️ Server Actions
File Structure
📄️ Server Actions with Prisma ORM
What is Prisma ORM?
📄️ Server Side NextJS
Data fetching operations should be performed on the server side whenever possible. It's important to understand that a component or page (not server actions) is a server component by default unless it is explicitly marked with "use client" directive or imported within a client component. Server components offer better performance and security for data operations.
📄️ Route Names and Folder Structure
For a well-organized application, it's important to follow a consistent routing pattern. Here's an example using the content entity:
📄️ Data Mutation with React Query
Using React Query enhances both readability and provides a faster development process. When implementing data mutations with React Query in conjunction with server actions, follow this naming convention for consistency:
📄️ Example of Zod and React Hook Form Usage
Below is a complete example of a client component (EditEntityForm.tsx) that demonstrates how to use Zod for validation and React Hook Form for form handling, along with React Query for data mutations:
📄️ EditEntityPage Page Implementation
Below is the implementation of the EditEntityPage page file that uses the EditEntityForm component. This is a server component that fetches data and renders the client-side form: