Next.js

/

What's REST API?

What’s a REST API?
REST Powers everyday apps
It's everywhere you look
REST APIs are not just URLs!

REST

/

API Basics

Stateless : No memory between requests
Uniform : Standard HTTP methods
Resources : Everything’s a URL
Type Unsafe ;(

REST is simple but powerful. Here’s what makes it tick:

Each API request stands alone. The server forgets you after replying, so you can not maintain a "conversation" with your API unless you provide all previous data. This is scalable and surprisingly powerful!

REST uses standard methods such as GET, POST, PUT, DELETE—they are same everywhere, so you always know what’s what.

Posts live at a URL such as /api/posts. Each has a unique address!

Unfortunately POST APIs do not pack type safety, but there are some code generation libraries that can help!

REST Requests follow a standard client-server architecture.

First, the client calls the REST Endpoint providing details of what data is requested in URL and message body.

Server responds with the type of data the user has requested, for example plain text, html, json or xml.

REST

/

Building APIs in Next.js

    import { NextRequest, NextResponse } from "next/server";

interface Post {
  id: number;
  title: string;
  tag: string;
  content?: string;
}

let posts: Post[] = [{ id: 1, title: "Learn REST", tag: "coding", content: "Fun!" }];

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const tag = searchParams.get("tag");
  const filtered = tag ? posts.filter(p => p.tag === tag) : posts;
  return NextResponse.json(filtered);
}

export async function POST(request: NextRequest) {
  const newPost: Post = await request.json();
  const postWithId = { ...newPost, id: posts.length + 1 };
  posts.push(postWithId);
  return NextResponse.json({ id: postWithId.id, message: "Post added" }, { status: 201 });
}

/app/api/posts/route.ts

Next.js makes APIs easy with file-based routes. Put a route ts file in app/api/posts directory, and it’s an endpoint! This code sets up our blogging app’s API. We use GET to fetch posts—filtered by tag if you add ?tag=coding. The POST adds a new post with an ID.

With Next, you need to export a particular command from the route ts file. To handle GET and POST requests, you need to export functions with that name.

The GET request has no body, and you need to encode all the information in the URL. Think of GET as a simple route visit. Therefore, we parsew the URL of the request and extract the tag from the query string.

Next, we filter current tags based on the tag and return the json value. Using the NextResponse json function also correctly sets the response header type to application/json.

All other non-GET requests, such as POST, and DELETE, have a body. Again, Next comes with a handy helper that reads a json value from the request body, in this case extracting the post we would like to create.

Last, we store the post from the body and return the ID on the new post in a JSON response.

REST

/

Fetching data from APIs

    interface Post {
  id: number;
  title: string;
  tag: string;
  content?: string;
}

async function fetchPostsByTag(tag: string): Promise<Post[]> {
  const response = await fetch(`http://localhost:3000/api/posts?tag=${tag}`);
  if (!response.ok) throw new Error("Fetch failed");
  const posts: Post[] = await response.json();
  return posts;
}

// [{ id: 1, title: "Learn REST", tag: "coding", content: "Fun!" }]
fetchPostsByTag("coding")
  .then(posts => console.log(posts)) 
  .catch(err => console.error(err));

Now let’s use the fetch command to call our API from the client—like a user browsing posts. This example grabs posts tagged “coding” from our Next.js API.

We create a helper function that fetches the data from api posts endpoint, providing the tag we would like to filter on.

When using GET, all we need to provide is the url and potentially the headers we would like to include. In this case, we only specified the url and the tag in the query string.

It is a good practice to check, whether the response is ok. The response is ok when the response code is in 200s, all other requests, such as 404 or 302 are deemed not ok.

We can use the JSON function helper to parse the JSON response. This function is asynchronous.

Last, we return the returned posts.

The helper function is asynchronous, so we need to use promises or async/await approach to read the filtered posts by tag.

REST

/

POSTing data to API

    async function createPost(newPost: Omit<Post, "id">): Promise<{ 
  id: number; message: string 
}> {
  const response = await fetch("http://localhost:3000/api/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newPost),
  });
  if (!response.ok) throw new Error("Create failed");
  return response.json();
}

const post = { title: "My API Journey", tag: "coding", content: "Wow!" };
createPost(post)
  .then(result => console.log(result)) // { id: 2, message: "Post added" }
  .catch(err => console.error(err));

Next.js

/

APIs

    // Update (PUT)
async function updatePost(id: number, updatedPost: Post): 
  Promise<{ message: string }> {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(updatedPost),
  });
  if (!response.ok) throw new Error("Update failed");
  return response.json();
}

const updated = { 
  id: 1, 
  title: "REST Rocks", 
  tag: "coding", 
  content: "Updated!" 
};
updatePost(1, updated).then(result => console.log(result));

// Patch (PATCH)
async function updatePost(id: number, updatedPost: Partial<Post>): 
  Promise<{ message: string }> {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(updatedPost),
  });
  if (!response.ok) throw new Error("Update failed");
  return response.json();
}

const updated = { 
  id: 1, 
  title: "REST Rocks"
};
updatePost(1, updated).then(result => console.log(result));

// Delete (DELETE)
async function deletePost(id: number): Promise<{ message: string }> {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`, {
    method: "DELETE",
  });
  if (!response.ok) throw new Error("Delete failed");
  return response.json();
}

deletePost(1).then(result => console.log(result));

REST

/

Best Practices

Clear URLs: /api/posts , not /api/getPosts
Status Codes: 201 for POST success
Handle Errors: Check response.ok
Pros - Scales
Cons - Overfetching

Full Stack Development

REST APIs

Next.js

What's REST API?

REST

API Basics

REST

Building APIs in Next.js

REST

Fetching data from APIs

REST

POSTing data to API

Next.js

APIs

REST

Best Practices