Next.js 14 Server Actions Tutorial - To-Do App
- Create a Next.js App Using this repo as an example
npx create-next-app@latest todo-app --use-npm --example "https://github.com/dtulpa16/nextjs-todo-app"
- After installation, open the project in your code editor and navigate to todo-app.
- Run the Next.js server
- Endpoint:
http://localhost:3000/api/todos
- Method:
GET
- Response: Array of To-Dos
- Endpoint:
http://localhost:3000/api/todos
- Method:
POST
- Body:
{
"task": "To-Do Task",
"dueDate": "2023-01-01",
}
- Response:
Task added successfully!
const toDo = {
"task": "To-Do Task",
"dueDate": "2023-01-01"
};
// Option 1: Using fetch
fetch('http://localhost:3000/api/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(toDo)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
// Option 2: Using axios
await axios.post("http://localhost:3000/api/todos", toDo)