next.js-tutorial

Next.js API Routes

API Routes is a Next.js feature that allows you to establish a REST API. Any file in the /pages/api subdirectory will be mapped as an API end point by Next.js. The following is an example of an API function.

export default (req, res) => {
   ...
}

Following are some important points to consider.

  • req: req is a http.IncomingMessage instance that is used to obtain data from a request.
  • res: res is a http.ServerResponse instance that is used to send data as a response.

Let’s make an example to show what we’re talking about.

Open up the directory you’d like to create your project in and run:

npx create-next-app api-routes

After the installation is complete, you can navigate to your new project directory:

cd api-routes

Once there, start your development server:

npm run dev

And once the server is ready, you can open up http://localhost:3000 in your browser where you can now see your new Next.js app!

API routes, which are part of our Next.js application folder structure, let us to create RESTful endpoints. Within the page folder, we need to create an api folder where we can specify all APIs for our application and add business logic without having to write any more custom server code or set up any API routes.

Now create a file hello.js in the api folder like below:

export default function handler(req, res) {
  res.status(200)
    .json({
      name: 'Learn Code Zone'
    })
}

Now let us navigate to http://localhost:3000/api/hello to confirm that our URL works.

Now it’s time to improve our setup. Make a nested or subfolder article. In a business application, we may need to collect, submit, or remove data with the click of a button, for which we may create different types of APIs, which we will detail below:

We’ve also created a database folder to store our data. For this reason, we’ll create a books folder in the api folder. We’ll create the books.js file inside the books folder to construct our API.

books.js

export const books = [
  {
    id: 1,
    title: "Things fall apart",
    pages: 209,
    language: "English"
    },
  {
    id: 2,
    title: "Fairy tails",
    pages: 784,
    language: "Danish"
    },
  {
    id: 3,
    title: "The book of Job",
    pages: 176,
    language: "Hebrew"
    },
  {
    id: 4,
    title: "Pride and Prejudice",
    pages: 443,
    language: "French"
    }
]

Let us understand using GET API

Create an index.js file in the books folder; because this is an API route, we’ll export a default handler function that accepts requests and responses as inputs.

index.js

import {
  books
} from "../../database/books";

export default function handler(req, res) {
  res.status(200)
    .json(books)
}

Now let us navigate to http://localhost:3000/api/books to confirm that it works.

Now, as our API works, let’s use this data to display the stored books. We simply made a new page, books.js under the pages folder.

books.js

import {
  useState
} from 'react'

function BooksPage() {
  const [books, setBooks] = useState([])

  const fetchBooks = async () => {
    const response = await fetch('/api/books')
    const data = await response.json()
    console.log(data)
    setBooks(data)
  }

  return (
    <>
    <div align="center">
      <button  onClick={fetchBooks}>Get the latest books</button>
     </div> {
      books.map(book => {
        return (
          <div align="center" key={book.id}>
            {book.id}.<br/>
            {"Title: "}{book.title}.<br/>
            {"Pages: "} {book.pages}.<br/>
            {"Language: "}{book.language} <br/>
            <hr/>
          </div>
        )
      })
    } <
    />
  )
}

export default BooksPage

We’re using the fetchBooks function to retrieve books from the database, and we’re using useState to alter the state with a single button hit. The following is the result:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *