How To Dev

Introduction NextJS Server Actions is a powerful feature that allows you to perform data mutations directly on the server without having to create API Routes manually. Distinguishing between Routes Handle and Server Actions Similarities: Both are code defined on the Server Both can be used in Server components and Client components Differences: Use Routes Handle if you need to call APIs from outside such as from partners or mobile Use Server Actions for internal CRUD processing operations The outstanding advantages of Server Actions compared to Routes Handle include: Tight integration with Form: Works smoothly with the action attribute of HTML forms. Progressive Enhancement: The application can still function basically even when JavaScript has not finished loading or is disabled. Security: Automatically protects against CSRF attacks and keeps sensitive processing logic on the server side. Code simplification: Reduces boilerplate code when connecting between Client and Server. When...

Introduction NextJS App Router is a revolution in building web applications with React, bringing optimized performance and a modern development experience: App Router: A new routing system based on React Server Components, allowing for complex data processing directly on the server, reducing the bundle size sent to the client, and supporting excellent data streaming. Folder-based Routing: Routing is defined based on the folder structure. Each folder represents a URL segment (segment), helping manage code intuitively and easily set up shared layouts. Server Actions: Allows you to write data processing functions (such as writing to a database) that run directly on the server but can be easily called from client components without needing to build manual API endpoints. Here, when using the App Router, there will be special files to distinguish between global (root app) and local as follows: Global: global-error.tsx : This must be a client component, used as an error boundary for the entir...