Server action database mutations in NextJS - Mini Project: Build & Apply

Server Action Database Mutations in Next.js

📖 Scenario: You are building a simple Next.js app to manage a list of books. You want to add new books to a database using server actions. This helps keep your app fast and secure by running database changes on the server.

🎯 Goal: Build a Next.js server action that adds a new book to a database. You will create the initial data structure, configure a helper variable, write the server action to insert the book, and complete the component to use this action.

📋 What You'll Learn

Create a simple in-memory array to act as the database

Add a configuration variable for the default book genre

Write a server action function to add a book to the array

Complete a React component that uses the server action to add a book

💡 Why This Matters

🌍 Real World

Server actions in Next.js let you safely update databases without exposing logic to the browser. This pattern is common in modern web apps for security and performance.

💼 Career

Understanding server actions and database mutations is essential for Next.js developers working on full-stack applications, enabling them to build secure and efficient data-driven features.

1

Create the initial book database array

Create a constant called books that is an empty array to hold book objects.

NextJS

# Create a constant called books as an empty array
# Your code here

Need a hint?

Use export const books = [] to create an empty array that can hold books.

2

Add a default genre configuration

Create a constant called defaultGenre and set it to the string "Fiction".

NextJS

export const books = []
# Create a constant called defaultGenre and set it to "Fiction"
# Your code here

Need a hint?

Use export const defaultGenre = "Fiction" to set the default genre.

3

Write the server action to add a book

Create an async function called addBook that takes a parameter title. Inside, push an object with title and genre set to defaultGenre into the books array.

NextJS

export const books = []
export const defaultGenre = "Fiction"
# Create async function addBook(title) that adds { title, genre: defaultGenre } to books
# Your code here

Need a hint?

Define addBook as an async function that pushes a new book object to books.

4

Complete the React component to use the server action

Create a default exported React functional component called AddBookForm. Inside, create a form with an input named title and a submit button. Use the addBook server action as the form's action handler.

NextJS

export const books = []
export const defaultGenre = "Fiction"

export async function addBook(title) {
    books.push({ title, genre: defaultGenre })
}

// Create a React component AddBookForm with a form that uses addBook as action
# Your code here

Need a hint?

Use a form with action={addBook} and an input named title. Add a submit button.