<!DOCTYPE html>

GET, POST, PUT & DELETE with Next.js App Router

<br> body {<br> font-family: sans-serif;<br> margin: 0;<br> padding: 20px;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code> h1, h2, h3 { color: #333; } code { font-family: monospace; background-color: #eee; padding: 5px; border-radius: 3px; } pre { background-color: #eee; padding: 10px; border-radius: 3px; overflow-x: auto; } img { max-width: 100%; height: auto; display: block; margin: 20px 0; } </code></pre></div> <p>

GET, POST, PUT & DELETE with Next.js App Router

Introduction

The Next.js App Router is a powerful new feature in Next.js 13 that fundamentally changes how we build and structure our applications. It leverages file-system routing, making your application code more organized and easier to manage. One of its key strengths is its seamless integration with server-side rendering (SSR) and server-side actions, allowing for efficient handling of data fetching and API calls. In this article, we'll dive deep into how the App Router handles the four fundamental HTTP methods: GET, POST, PUT, and DELETE.

Understanding these methods is crucial for building dynamic web applications that interact with data. GET requests are used to retrieve data, while POST, PUT, and DELETE are used for creating, updating, and deleting data, respectively. The App Router makes implementing these actions with ease and flexibility.

Understanding HTTP Methods

Before we dive into the App Router, let's quickly recap the four primary HTTP methods and their purposes:

GET
: Used to retrieve data from a server. This is the most common method and is idempotent, meaning it can be executed multiple times without changing the state on the server.
POST
: Used to send data to a server to create a new resource. This method is not idempotent and should only be executed once.
PUT
: Used to update an existing resource on the server. This method is idempotent, meaning it can be executed multiple times with the same data without changing the server's state.
DELETE
: Used to remove a resource from the server. This method is idempotent and cannot be undone.

The Power of the App Router

The App Router in Next.js 13 offers several advantages for handling HTTP methods:

Simplified Routing:
The App Router's file-system routing makes it incredibly easy to define routes for different actions. You simply create files with the desired route names, like [id].js for a dynamic route, or create.js for a POST route.
Built-in Server-Side Actions:
The App Router comes with server-side actions that are perfect for handling data manipulation using methods like POST, PUT, and DELETE. These actions are run on the server, ensuring secure and efficient data processing.
Enhanced Data Fetching:
The App Router seamlessly integrates with data fetching solutions like fetch or SWR , enabling you to easily load data for both GET requests and server-side actions.
Server-Side Rendering (SSR):
The App Router's support for SSR allows you to render the initial HTML of your page on the server, improving SEO and user experience.

Implementing HTTP Methods with App Router

Let's see some examples of how to implement GET, POST, PUT, and DELETE with the App Router:

GET: Retrieving Data

For retrieving data, we'll use the loader function in our route file. The loader function executes on the server and returns data that will be used to render the page.


// app/page.js


export default async function Page() {

  const data = await fetch('https://api.example.com/products');

  const products = await data.json();

return (

    


      Products


      

        {products.map((product) => (
          {product.name}

        ))}
      


    

  );

}

// Server-side data fetching

export async function loader() {

  const data = await fetch('https://api.example.com/products');

  return data.json();

}

In this example, we define a
loader
function that fetches data from an API and returns the product data. This data will be used in the
Page
component to render a list of products.

POST: Creating Data

For creating data, we'll utilize server-side actions within the App Router. Let's create a route for adding new products:


// app/create.js


export default function CreatePage() {

  // ... (Form for adding new products)

}

// Server-side action to handle POST request

export async function action({ request }) {

  const formData = await request.formData();

  const productName = formData.get('name');

try {

    const response = await fetch('https://api.example.com/products', {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({ name: productName }),

    });
// Redirect to the product list after successful creation
return new Response(null, {
  status: 302,
  headers: { Location: '/' },
});


} catch (error) {

    // Handle errors, e.g., display an error message

    console.error(error);

    return new Response(null, { status: 500 });

  }

}

In this code, we define an
action
function that handles POST requests to the
/create
route. It receives the form data, processes it, and sends a request to the API to create a new product. On success, it redirects the user back to the product list.

PUT: Updating Data

To update existing data, we'll use the action function with a dynamic route. Consider a route like app/[id]/edit.js :


// app/[id]/edit.js


export default function EditPage({ params, data }) {

  // ... (Form for editing product details)

}

// Server-side action to handle PUT request

export async function action({ request, params }) {

  const formData = await request.formData();

  const updatedProduct = formData.get('name');

try {

    const response = await fetch(https://api.example.com/products/${params.id}, {

      method: 'PUT',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({ name: updatedProduct }),

    });
// Redirect to the product details page after update
return new Response(null, {
  status: 302,
  headers: { Location: `/products/${params.id}` },
});


} catch (error) {

    // Handle errors

    console.error(error);

    return new Response(null, { status: 500 });

  }

}

// Server-side data fetching for initial data

export async function loader({ params }) {

  const response = await fetch(https://api.example.com/products/${params.id});

  return response.json();

}

This code defines a route that accepts a product ID as a parameter. The
action
function handles the PUT request, updating the product data in the API. On success, it redirects to the product details page.

DELETE: Removing Data

For removing data, we'll use the action function again with a dynamic route:


// app/[id]/delete.js


export default function DeletePage() {

  // ... (Confirmation dialog for deleting product)

}

// Server-side action to handle DELETE request

export async function action({ params }) {

  try {

    const response = await fetch(https://api.example.com/products/${params.id}, {

      method: 'DELETE',

    });
// Redirect to the product list after deletion
return new Response(null, {
  status: 302,
  headers: { Location: '/' },
});



} catch (error) {


    // Handle errors


    console.error(error);


    return new Response(null, { status: 500 });


  }


}

This code handles a DELETE request to remove a specific product from the API. It then redirects the user back to the product list.

Best Practices

Here are some best practices for working with HTTP methods in the App Router:

Follow REST principles:

Structure your API endpoints according to RESTful conventions to ensure clarity and consistency.
Use appropriate HTTP methods:

Choose the correct HTTP method based on the action you want to perform.
Handle errors gracefully:

Implement error handling mechanisms to prevent unexpected application behavior.
Keep actions concise:

Focus on specific actions within each server-side action function.
Use caching for GET requests:

Utilize browser caching or server-side caching to improve performance.
Validate input data:

Sanitize and validate input data before sending it to the server.
Secure your API:

Protect your API with authentication and authorization mechanisms.

Conclusion

The Next.js App Router provides a powerful and elegant way to handle HTTP methods in your applications. By leveraging server-side actions and file-system routing, you can build robust and dynamic applications that interact with data efficiently and securely. Remember to follow best practices, such as adhering to REST principles and implementing error handling, to ensure a well-structured and reliable application.

This article has provided a comprehensive introduction to working with GET, POST, PUT, and DELETE in the App Router, equipping you with the knowledge to build engaging and data-driven web experiences.