This repository demonstrates four distinct methods for sending data from a Next.js 15 application to a server. Each method is tailored to specific use cases, allowing developers to choose the best approach based on their application needs.
Sending a JSON Payload to an API Endpoint This method is suitable for applications that require structured data transfer, such as when interacting with RESTful APIs. Sending a Form Data Payload to an API Endpoint Ideal for traditional form submissions where data is sent in a format that can be easily processed by the server. Sending a Data Object to a Server Action This approach leverages Next.js's server actions, allowing for more direct and efficient data handling within the application. Sending a Form Data Object to Another Server Action Similar to the previous method but specifically designed for form submissions that need to trigger server-side logic.
Next.js 15: The latest version of the React framework for building server-rendered applications. Zod: A TypeScript-first schema declaration and validation library. TypeScript: A superset of JavaScript that adds static types, enhancing code reliability. Tailwind CSS: A utility-first CSS framework for rapid UI development. Shadcn: A component library designed to work seamlessly with Tailwind CSS.
To get started with this repository, follow these steps:
Clone the repository:
bash
git clone git@github.com:s-babaeizadeh/next-js-sending-data-typescript-zod.git
cd your-repo-name
Install dependencies:
npm install
Run the development server:
npm run dev
Open your browser and navigate to http://localhost:3000.